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Partie I 



Introduction a Ajax 



Dans cette premiere partie, nous vous proposons de decouvrir ce que represente Ajax 
et la place que cette technologie prend au sein du Web 2.0. Pour bien apprehender le 
fonctionnement d'un nouveau concept il est souvent interessant de connaitre son 
historique, aussi nous commencerons par un rapide recapitulatif des etapes cles de 
revolution du Web pour montrer en quoi le Web 2.0 est devenu incontournable dans 
l'lnternet d'aujourd'hui et de demain. Savoir ce qu'on peut realiser avec Ajax et 
connaitre les grands acteurs d' Internet qui l'utilisent vous convaincra de l'interet que 
vous pourrez tirer de cette technologie dans vos futures applications Web. Enrin, 
comprendre comment fonctionne Ajax, detailler ses avantages et ses inconvenients, et 
presenter l'objet XMLHttpRequest qui constitue le coeur de cette technologie, nous a 
semble un passage oblige avant que vous ne realisiez vos premieres applications Ajax- 
PHP. 



1 



Chronologie du Web 



Depuis le debut d'Internet, le Web a evolue par paliers et plusieurs phases se sont succe- 
dees avant d'obtenir les applications en ligne que Ton utilise aujourd'hui. Curieusement, 
les periodes charnieres de ces evolutions sont espacees d'environ 5 ans et si Ton anticipe 
revolution a venir, il y a de fortes chances que 2010 soit l'annee qui marquera la maturite 
du Web 2.0. 



1990 : debut du Web statique 

Au debut du Web, les pages HTML se limitaient a l'affichage de simples textes et a 
quelques illustrations (dont l'affichage etait d'ailleurs souvent bloque pour ameliorer la 
fluidite de la navigation sur les reseaux a faible debit de l'epoque). Au fil des annees, 
avec l'avenement d'Internet tel qu'on le connait, les exigences des utilisateurs ont 
evolue. En effet, la seule interactivite possible sur les pages HTML etait l'affichage une 
nouvelle page lors d'un clic sur un lien hypertexte. II etait done impossible d'obtenir le 
moindre effet visuel (comme un simple roll-over sur une image par exemple) sans avoir 
recours a une technologie complementaire. De plus, 1' envoi d'une requete au serveur 
Web, suite a un clic sur un lien hypertexte par exemple, engendrait un cycle de traitement 
long et fastidieux qui freinait considerablement la reactivite des applications sur des reseaux 
et des serveurs souvent sous-dimensionnes pour le trafic sans cesse croissant de l'epoque. 



Les sites statiques 

Les sites statiques sont constitues d'un ensemble de pages HTML reliees entre elles par des liens hyper- 
textes qui permettent de naviguer de I'une a I'autre. Le protocole utilise pour transferer des informations 
Web sur Internet s'appelle HTTP. Une requete HTTP {http://www.eyrolles.com/page.htm par exemple) est 
envoyee vers le serveur afin d'acceder a la page desiree et de la visualiser dans le navigateur du poste 
client (voir etape 1 de la figure 1 -1 ). 

Lorsque le serveur Web recoit cette requete, il recherche la page demandee parmi toutes les pages 
HTML presentes sur le site concerne et la renvoie ensuite au client (voir etape 2 de la figure 1 -1 ). 
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Les sites statiques (suite) 

Le code HTML regu par le poste client est alors interprets et affiche par le navigateur (voir etape 3 de 
la figure 1 -1 ). C'est ce qu'on appelle I'architecture client-serveur (je demande, on me sert) : le client est le 
navigateur Internet (Internet Explorer, Firefox...) et le serveur est le serveur Web sur lequel sont stockees 
les informations du site Internet. 

Ce type de site est tres simple a realiser et la plupart des premiers sites ont ete congus sur ce modele. 
Cependant, ce concept est limite car il manque cruellement d'interactivite. 






3 Interpretation du code Html par le navigateur client 
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Figure 1-1 

L' architecture client-serveur d'un site statique : le poste client envoie au serveur line requite 
HTTP ; le serveur Web recherche puisfournit au poste client la page demandee, qui est ensuite 
interpretee par le navigateur. 



HTTP 

HTTP (Hyper Text Transfer Protocol) est le protocole utilise principalement par toutes les applications 
Web : celui-ci permet I'echange de donnees entre un serveur Web et un navigateur installe sur un poste 
client. Ainsi, le navigateur peut envoyer au serveur Web une requete formalisee sous la forme de I'adresse 
de la page ciblee (URL) et recevoir en reponse la page HTML correspondante qui remplacera complete- 
ment la page actuellement affichee dans le navigateur. Comme la plupart des protocoles applicatifs 
d'lnternet (FTP, SMTP, POP3...) HTTP s'appuie sur un autre protocole de transport, le TCP/IP (Transmis- 
sion Control Protocol/Internet Protocol) qui assure I'acheminement des donnees par paquets (I'ensemble 
des donnees est scinde en petits paquets pendant la phase du transfert) d'un point a un autre. 



(x)HTML 

HTML (HyperText Markup Language) est le langage de description d'une page Web. Ce langage s'appuie 
sur un ensemble de balises standards interpreters par le navigateur afin de definir le contenu et la mise 
en forme de la page. 

Le XHTML (extensible HyperText Markup Language) quant a lui, est une evolution du precedent langage 
conforme aux contraintes du XML et impose le respect de certaines regies pour qu'une page soit bien 
formee (noms des balises en minuscule, attributs des balises obligatoirement encadres par des guillemets, 
fermeture obligatoire de toutes les balises...). 



1995 : le Web oriente client 

Pour remedier au manque d'interactivite et aux problemes d' engorgement des reseaux et 
de saturation des serveurs Web, les developpeurs ont commence a mettre en oeuvre diver- 
ses technologies cote client afin de delester le serveur (reduisant ainsi le trafic sur le 
reseau) de taches pouvant etre traitees directement par le navigateur. Ainsi chaque editeur 
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de navigateur Web a rapidement commence a implementer dans son logiciel des interpre- 
ters pour son propre langage. Aussi, Netscape avec JavaScript et Microsoft avec JScript 
permirent de pouvoir enfin executer des scripts cote client ; mais le non respect des stan- 
dards du W3C de certains editeurs compliquait le travail des developpeurs qui devaient 
tenir compte des differences d' interpretation de leur code d'un navigateur a 1' autre. 

Ces nouvelles technologies client ont souleve aussi un autre probleme : celui de la secu- 
rite des utilisateurs. Ainsi les editeurs des navigateurs durent rapidement ajouter dans les 
options de leurs logiciels la possibility de desactiver l'execution des differentes techno- 
logies client pour repondre a la crainte des utilisateurs. Le fait meme que certains naviga- 
teurs ne puissent plus executer les scripts client a constitue un frein important a leur 
usage car les developpeurs devaient alors prevoir des alternatives en mode degrade pour 
permettre a tous les utilisateurs d'utiliser leur application. 

Par la suite, d'autres societes ont developpe des programmes proprietaries (applets Java, 
ActiveX, Flash...) pouvant etre integres dans une page Web et executes dans le naviga- 
teur grace a un plug-in (extension du navigateur). Le Web disposait alors d'une plethore de 
technologies client mais le manque de standardisation et l'heterogeneite des navigateurs 
en rendaient leur usage tres difficile. 



Les sites interactifs cote client 

La solution la plus simple pour creer de I'interactivite consiste a integrer quelques lignes de code JavaScript 
dans une page HTML. Lorsqu'une requete HTTP appelle la page HTML (voir etape 1 de la figure 1-2), le 
serveur Web la retourne au poste client afin quelle puisse etre interpretee comme une page HTML clas- 
sique (voir etapes 2 et 3 de la figure 1-2). Le script inclus dans la page est ensuite traite par le navigateur 
(done cote client) des que survient I'evenement pour lequel il a ete programme (voir etape 4 de la figure 1 -2). 
Les scripts cote client sont simples a mettre en ceuvre car ils ne necessitent pas une infrastructure serveur 
specifique. De plus, ils sont tres reactifs car le script s'execute directement sur le poste client. 

4 Execution d'un script cote client 

3 Interpretation du code HTML par le navigateur 
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Utilisation d'un script cote client avec JavaScript : il existe une dependance relative au navigateur 
mais I'interactivite est rapide. 

En revanche, les programmes JavaScript souffrent de problemes de compatibilite avec la configuration du 
client sur lequel ils s'executent et peuvent se comporter differemment selon le type d'ordinateur et la 
version du navigateur. Par exemple, un script en JavaScript peut parfaitement fonctionner sur Firefox mais 
poser des problemes avec Internet Explorer ou creer des erreurs sous IE 5 alors qu'il fonctionne sous IE 6 
ou IE 7. De meme, les resultats peuvent varier selon qu'on utilise un PC ou un Mac. Tout cela impose au 
concepteur multimedia d'effectuer des tests importants s'il desire que sa page interactive fonctionne sur 
toutes les plates-formes et dans toutes les configurations. ^ 
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Les sites interactifs cote client (suite) 

D'autres problemes lies a la securite des donnees constituent aussi un frein a I'usage des technologies 
client. En effet, le code source des programmes etant integre dans la page renvoyee par le serveur au 
client, il devient facile pour un developpeur mal intentionne d'alterer le fonctionnement des scripts en 
consultant simplement le code source de la page HTML. 

Enfin, la possibilite donnee a I'internaute d'invalider le fonctionnement de JavaScript sur son navigateur 
contraint le developpeur a prevoir des solutions alternatives pour que ses applications puissent quand 
meme fonctionner en mode degrade. 



JavaScript 

On appelle souvent JavaScript, par abus de langage, I'ensemble des deux technologies client les plus utilisees 
sur le Web : le « JavaScript » developpe par Netscape Communications (a ne pas confondre avec Java) et 
le « Jscript » developpe un peu plus tard par Microsoft pour concurrencer la technologie de Netscape. En 
realite, ils sont tous les deux conformes (ou censes I'etre...) au ECMAScript (European Computer Manu- 
facturers Association) qui est un standard europeen, mais aussi international, de ces technologies client. 
Quoi qu'il en soit, le fonctionnement des deux technologies est le meme. Les instructions JavaScript ou 
Jscript sont incluses dans le code HTML des pages envoyees par le serveur vers le poste client, puis sont 
traitees directement par le navigateur grace a un interpreter standard implements dans le logiciel client. 



2000 : le Web oriente serveur 

A partir des annees 2000, revolution croissante des complications rencontrees avec les 
technologies client a entraine une migration progressive des applications cote serveur. 
Motives par les problemes de compatibilite et de securite lies aux applications cote 
client, bon nombre de developpeurs ont adapte et installe leur programme cote serveur 
pour mieux satisfaire les internautes (ce qui explique en partie 1' extraordinaire develop- 
pement de langages serveurs comme le PHP). En quelques annees la majorite des sites 
ont subi des refontes structurelles pour s' adapter a une infrastructure Web exploitant 
principalement des applications cote serveur et cela malgre une organisation du serveur 
Web plus complexe liee a I'usage de ces technologies serveur. 

Cependant, l'utilisation intensive des technologies serveur n'est pas non plus sans inconve- 
nient. En effet, un usage exclusifd' applications serveur (alors que certaines gagneraient 
a etre executees cote client) entraine l'echange, entre le client et le serveur, d'un grand 
nombre de requetes qui ont vite fait d'engorger le reseau et de ralentir fortement la reac- 
tivite de 1' application. De meme, a chaque requete, le serveur envoie la page HTML 
complete avec tout son lot d' informations redondantes, ce qui ralentit fortement 
l'echange d' informations entrainant des temps d'attente importants pour l'utilisateur. 



Les sites interactifs cote serveur 

Lorsque I'interactivite est placee cote serveur, le serveur Web doit disposer d'un preprocesseur PHP afin 
de traiter les scripts PHP integres dans la page avant d'envoyer celle-ci au poste client qui en a fait la 
demande (voir etapes 1 et 2 de la figure 1 -3). 

Si on le compare avec un script cote client, la reaction d'un script cote serveur a un evenement est 
beaucoup plus lente car elle necessite renvoi d'une requete au serveur (voir etape 1 de la figure 1-3), 
son execution sur le serveur (etape 2), le retour de la reponse par le reseau Internet (etape 3) et le 
chargement d'une page HTML complete dans le navigateur (etape 4). 
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4 Interpretation du code HTML par le navigateur 
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Figure 1-3 

Utilisation d 'un script cote serveur : il n 'y pas de dependance vis-a-vis du navigateur mais I 'interac- 
tivite est plus lente. 

En revanche, les langages cote serveur sont independants de la plate-forme du client ou de la version de 
son navigateur. En effet, 1'interpretation du script est realisee cote serveur et le code envoye vers I'ordina- 
teur du client est compatible avec le standard HTML et done interprete de la meme maniere par tous. 
Parmi les inconvenients des scripts cote serveur, il taut signaler que leur utilisation necessite la disponibi- 
lite d'un serveur adapte. Meme si les offres des hebergeurs qui proposent des serveurs integrant des 
scripts dynamiques sont desormais tres accessibles, il taut en tenir compte lors de votre choix. 



Les sites dynamiques 

[.'execution du script cote serveur permet de creer une page « a la volee » lors de son execution par le 
preprocesseur PHP integre au serveur. La page ainsi creee contient les memes informations qu'une simple 
page HTML. Elle peut done etre interpret.ee sans probleme par le navigateur cote client (voir figure 1 -4). 
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Figure 1-4 

Utilisation d'un script cote serveur avec acces a une base de donnees lors de la creation d'une 
page dynamique. 



Introduction a Ajax 



Partie I 



Les sites dynamiques (suite) 

Lors de la creation de cette page, les scripts (PHP par exemple) integres au fichier dynamique sont execu- 
tes et, si necessaire, etablissent une connexion a un serveur de donnees. Avec ce processus, la page 
dynamique devient un modele de presentation des informations. Ce modele pouvant etre personnalise par 
des contenus differents selon la requete du client. 

II n'est done plus necessaire, par exemple, de creer une page specifique pour presenter chaque produit 
d'un catalogue : une seule page dynamique peut etre utilisee. II suffit de lui indiquer I'identifiant du produit 
demande grace a une variable qui lui est transmise en meme temps que son appel ; la page renvoyee au 
client contient alors toutes les informations et photos relatives au produit concerne. Larborescence du site 
est simplified puisque cette page dynamique remplace les nombreuses pages statiques correspondant a 
chaque produit. 



MySQL 

MySQL (My Structured Query Language) est un serveur de base de donnees relationnelles SQL souvent 
couple avec le langage de script serveur PHP. 



PHP 

PHP (initialement Personal Home Page puis Hypertext Preprocessor) est un langage de script libre utilise 
principalement comme langage de programmation Web cote serveur. 



2005 : le compromis client-serveur tant attendu 



Heureusement, les navigateurs les plus courants se sont ameliores en attachant progressive - 
ment plus d' importance aux standards (meme s'il reste encore des divergences entre certains 
d'entre eux. . .), diminuant ainsi les problemes de compatibilite lies a 1' usage de technologies 
cote client. De meme, la valeur ajoutee resultant des applications client sans cesse plus puis- 
santes a compense rapidement les craintes des utilisateurs a leur egard. Le fait que bien des 
sites populaires exploitent desormais le JavaScript a entraine progressivement une dispari- 
tion des utilisateurs qui desactivaient les technologies client dans leur navigateur. 

Ces evolutions ont eu une incidence benefique sur les ventilations des applications et ont 
permis un retour a un juste equilibre des taches entre le client et le serveur. Desormais, 
l'usage du JavaScript, du DOM et des CSS est entre dans la normalite et ces techno- 
logies sont d'ailleurs fortement recommandees pour assurer l'accessibilite du site aux 
personnes handicapees. 

Maintenant, les applications peuvent etre equitablement reparties entre le client et le 
serveur favorisant ainsi une meilleure reactivite des systemes meme si certaines taches 
comme la conservation des donnees (la liaison avec les bases de donnees est toujours 
realisee cote serveur) ou la gestion de l'authentification restent encore le privilege des 
technologies serveur. 



DOM 

Le DOM (Document Object Model) est une technologie qui permet la modelisation des elements d'une 
page XHTML sous forme d'une hierarchie normalises independante de tout type de langage. Couple a la 
technologie JavaScript, il est ainsi possible de modifier la structure d'une page Web a la volee. Le DOM 
fait partie des technologies exploitees par Ajax pour interagir sur le contenu ou la forme d'une page 
XHTML. 
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CSS 

Le CSS (Cascading Style Sheets) permet de decrire precisement la mise en forme d'une page HTML, 
XHTML ou XML. II est ainsi possible de separer clairement le contenu d'une page Web (materialise par les 
balises XHTML) et sa forme (decrite par la feuille de style CSS). 



Les tendances du Web 2.0 de demain. 

Puisque la situation semble s'etre stabilised depuis l'equilibre des taches entre client et 
serveur, nous pourrions nous demander en quoi Ajax pourrait ameliorer encore l'usage 
des applications Web sur Internet. Si la ventilation des scripts client-serveur s'est revelee 
fructueuse pour une meilleure reactivite des applications, le probleme de l'inertie des 
requetes HTTP n'en reste pas moins present. De plus, l'envoi d'une requete bloque les 
actions de l'internaute jusqu'a la reponse du serveur et le fait que la reponse du serveur 
soit constitute du code complet de la page et que la page en cours soit obligatoirement 
rafraichie sont des inconvenients dont on aimerait bien se passer. 

La technologie Ajax peut alors apporter une solution a cette problematique. En effet, 
partant du constat que 1' execution des programmes cote client est devenue maintenant 
plus fiable sur la majorite des navigateurs et que l'objet XMLHttpRequest est desormais 
implements sur la plupart d' entre eux, il devient possible de mettre en oeuvre des applica- 
tions Ajax gerant l'envoi de la requete au serveur d'une maniere asynchrone. Le mode 
asynchrone est possible grace a une utilisation pertinente de l'objet XMLHttpRequest 
qui permet d'envoyer une requete serveur en tache de fond sans pour autant bloquer 
l'activite de l'application client pendant l'attente de la reponse du serveur. A la reception 
de la reponse du serveur, la donnee (et non toute la page HTML comme c'etait le cas 
auparavant) s'inserera automatiquement dans la page Web en cours sans que s'opere un 
rafraichissement complet de la page (voir figure 1-5). 
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Figure 1-5 

Utilisation d'un moteurAJAX charge cote client afin d'interagir d'une maniere asynchrone avec un programme 
serveur en PHP. 



Introduction a Ajax 



Partie I 



Avec ce type de processus, les applications Web deviennent plus souples a utiliser, car 
elles ne bloquent plus l'utilisateur pendant le temps d'attente du serveur. De meme, elles 
permettent une meilleure reactivite de 1' application car seule la donnee demandee sera 
retournee au client. Enfin, le fait qu'il n'y ait plus de charge ment d'une nouvelle page a 
chaque requete, ameliore considerablement le contort de l'internaute. Tous ces atouts 
permettent desormais de proposer aux internautes des applications riches tres reactives 
qui prefigurent une nouvelle ere, celle du Web 2.0. 



Ajax 

Ajax (Asynchronous JavaScript and Xml) designe une combinaison de technologies (XHTML, DOM, CSS, 
XML, JavaScript et plus particulierement son objet XMLHttpRequest ) permettant de mettre en ceuvre sur 
le Web des applications interactives et riches comparables aux logiciels disponibles jusqu'alors sur les 
ordinateurs de bureau. 



XMLHttpRequest 

XMLHttpRequest est une classe JavaScript disposant de proprietes et de methodes permettant de recu- 
perer des donnees sur le serveur d'une maniere asynchrone. 
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Ajax, un acteur du Web 2.0 



Les fondements du Web 2.0 

Avant de parler plus particulierement d' Ajax, rappelons quelques notions de base sur les 
sites Web 2.0, ou plutot les sites de « type Web 2.0 », car l'appellation Web 2.0 correspond 
plus a un concept qu'a la structure materielle ou logicielle specifique d'un site. 

Application Internet riche (RIA) 

Les sites Web 2.0 se caracterisent par leurs fonctionnalites, leur ergonomie et leur reac- 
tivite qui s'apparentent davantage a des applications d'ordinateurs de bureau qu'aux 
applications traditionnelles du Web. 

Quand on souhaite mettre en ceuvre un site de type Web 2.0 avec les avantages que nous 
avons enumeres precedemment, il faut faire appel a des applications Internet riches 
(RIA). Contrairement aux applications Web traditionnelles pour lesquelles le traitement 
des donnees est principalement realise cote serveur (le client ne faisant qu'en assurer la 
presentation), les applications Internet riches deportent les traitements sur le client (navi- 
gateur) afin de mettre a la disposition de l'utilisateur des fonctionnalites avancees et tres 
reactives. 



RIA 

Les RIA (Rich Internet Application) sont des applications Web qui permettent de disposer en ligne des 
memes services que sur une application habituellement installee sur un ordinateur de bureau. 
Le webmail est bon exemple de RIA simple car il permet de consulter ses messages electroniques depuis 
un navigateur, alors que cela necessitait auparavant I'utilisation d'un gestionnaire de messagerie preala- 
blement installe sur son ordinateur (Outlook par exemple). 



Ajax, 1'application Internet riche legere 

Pour realiser ces applications d'un genre nouveau, differentes technologies peuvent etre 
mises en ceuvre. Parmi ces technologies, il en existe une qui se distingue particulierement 
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et qui fait beaucoup parler d'elle : Ajax, mais d'autres solutions permettent aussi de creer 
des clients riches Internet tel que Flash couple avec Flex ou encore les applications Java 
deployees sur Internet a l'aide de Java Web Start. 

Cependant, Ajax est souvent prefere par les developpeurs car, contrairement aux autres 
RIA, il a l'enorme avantage de ne pas necessiter la presence d'un plug-in puisqu'il 
exploite des technologies integrees par defaut dans tous les navigateurs recents (CSS, 
DOM, JavaScript et son objet XMLHttpRequest, XML). 

A noter que, parmi les RIA, certaines comme les applications Java sont considerees 
comme des clients lourds du fait de 1' infrastructure logicielle necessaire au fonctionne- 
ment de 1' application a ajouter au navigateur. D'autres, comme Flash, necessitent un 
plug-in moins volumineux et qui, de surcroit, est souvent pre-installe dans la majorite des 
navigateurs. En comparaison, Ajax ne necessite aucun plug-in pour fonctionner, nous 
pouvons done le considerer comme une application riche Internet legere. 



Plug-in 

Le plug-in est un programme devant etre installe prealablement sur le navigateur pour qu'une application 
puisse fonctionner. 



Ajax, dans la droite ligne du Web 2.0 

Ajax se place dans la droite ligne du Web 2.0 car il permet aux internautes de disposer 
d'interfaces riches semblables a celles des logiciels de bureau. 

En effet, les applications Ajax permettent de disposer de fonctionnalites avancees mais 
aussi d'ameliorer l'interactivite et l'ergonomie des interfaces Web. Concretement, 
l'internaute peut declencher des traitements modifiant a la volee la structure de la page ou 
generant des effets graphiques avances (reduction progressive de la taille d'une image sur 
un survol de la souris, disparition ou apparition fluide et progressive d'une image, depla- 
cement instantane d'un element de la page par un simple glisser-deplacer de la souris. . .). 
Les applications Ajax permettent aussi de faire abstraction des problemes d'heteroge- 
neite du navigateur utilise (grace a l'utilisation de bibliotheques externes) afin d' assurer 
le meme rendu graphique sur toutes les plates-formes mais, surtout, les memes fonction- 
nalites avancees qui font la richesse de ces nouveaux types d'interface. 

Les applications Ajax se caracterisent principalement par un nouveau mode d'echange de 
donnees entre le navigateur et le serveur Web. Contrairement aux sites traditionnels pour 
lesquels 1' envoi d'une requete vers le serveur impose au navigateur d' attendre sa reponse, 
le privant du meme coup de tout type d'activite pendant ce delai (transfert synchrone), les 
applications Ajax permettent d'emettre une requete et d'en receptionner la reponse d'une 
maniere differee (transfert asynchrone) sans interrompre l'activite de l'utilisateur. En 
plus de cet avantage — qui est loin d'etre negligeable — la reponse du serveur ne 
contient que les donnees sollicitees par la requete et non toute la page HTML comme 
e'est le cas lors d'une reponse classique. Des son arrivee sur le poste client, un processus 
est declenche qui introduit discretement les nouvelles donnees dans la page active, 
evitant ainsi le rechargement de la page a l'origine des « trous blancs » (temps d'attente) 
desagreables que Ton connait. Avec ce type de transfert, le trafic s'en trouve reduit et la 
reactivite de 1' application renforcee. 
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La genese d'Ajax 

En decembre 2004, Google lance en version beta un nouveau service en ligne : « Google 
Suggest » (voir figure 2-1). Ce moteur de recherche intelligent suggere une liste de dix 
mots en rapport avec les premieres lettres saisies dans le champ de recherche. A chaque 
ajout d'une lettre, les suggestions du menu deroulant sont actualisees dynamiquement. 
Ces dernieres indiquent en plus le nombre de resultats correspondant a chaque sugges- 
tion, guidant ainsi l'internaute dans son choix. Le concept des applications interactives 
de la nouvelle generation du Web etait ne. 



Fichier Edition Afn'chage Historique Marque-pages Outils 
Web Images Video News Maps Gmail more t 







iGooqle I Sign in 



GoooSe 

Suggest\_7 abs 




ajaccio 

ajax examples 
As you type, Gooi „■! . ,„ ' 
1 ^ ' ajay devgan 

ajax tutorials 

ajaccio s island 

ajax toolkit 

ajay 

ajax framework 



9.041000 results 

4.6S0.0OO results 

389.000 results 

45 .800 .OCX) resulb 

330 results 

1 S10 0OO results 

5,600.000 results 

44,400.000 results 



■suits. Learn more 



Figure 2-1 

Exemple d'une recherche d' informations sur Ajax avec Google Suggest 



Quelques mois plus tard, en fevrier 2005, le nom « Ajax » fait sa premiere apparition sur 
Internet dans un article de Jesse James Garret de l'agence Adaptative Path (voir figure 2-2). 
Son article, Ajax: A New Approach to Web Applications, expose ses experimentations 
concernant 1' utilisation de JavaScript pour creer des interfaces innovantes qui se distin- 
guent des applications actuelles par une grande interactivite et dans lesquelles le charge- 
ment d'une page entiere n'est plus necessaire. Ce nouveau type d'interface permet de 
mettre en oeuvre des fonctionnalites avancees qui s'apparentent a celles des ordinateurs 
de bureau. II definit alors Ajax comme etant le raccourci de Asynchronous JavaScript 
And Xml. 

Par la suite, courant 2005, Google lance de nouvelles applications a succes du meme type 
comme Gmail, Google Map ou encore dernierement Google Calendar. Mais Google 
n'etait pas le seul a s'interesser a Ajax. Yahoo! notamment a retenu en 2005 cette techno- 
logic innovante lors de la refonte de son site d' informations Yahoo! News. Depuis, de 
nombreux sites exploitent Ajax pour rendre leur interface plus interactive et cela laisse 
presager que la technologie Ajax n'en est qu'a ses balbutiements. 
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If anything about current interaction design can be 
called * glamorous," it's creating Web applications. 
After all, when was the last time you heard someone 
rave about the interaction design of a product that 
wasn't on the Web? (Okay, besides the iPod.) All the 
cool, innovative new projects are online. 

Despite this, Web interaction designers can't help but 
feel a little envious of our colleagues who create 
desktop software. Desktop applications have a 
richness and responsiveness that has seemed out of 
reach on the Web. The same simplicity that enabled 
the Web's rapid proliferation also creates a gap 
between the experiences we can provide and the 
experiences user-; can get from a desktop 
application, 

That gap is closing. Take a look at Google Suggest. 

Watch the way the suggested terms update as you 

type, almost instantly. Now look at Google Maps. 

Zoom in. Use your cursor to grab the map and scroll 

around a bit- Again, everything happens almost instantly, with no waiting for pages to 

relO-id. 



Research Is a Methodj Not a 

Methodology 

March 9, ZQQ? 

Sarah Nelson interview 
Scott Berkun at MX San 
Francisco 
February 22, 2007 

Nine Adaptive Pathers Share 
Their Resolutions for 2007 
January 4, 200? 

Interview with Tim Brown, 
CEO of IDEO 
January 3, 2007 

Bruce Sterling's Closing 
Remarks, IDEA 2006 
December 14, 2006 

Essay Archives » 



Figure 2-2 

Article de Jesse James Garret enfevrier 2005 qui attribue pour la premiere fois le terme « Ajax » a un nouveau 
type d' application interactive. 

A quoi serf Ajax ? 

Pour illustrer 1' utilisation d' Ajax, rien de mieux que quelques exemples concrets. Aussi, 
nous vous proposons ci-dessous une liste non exhaustive (loin de la !) de quelques 
emplois courants d'Ajax dans le Web 2.0 d'aujourd'hui. 



Actualisation d information en tache de fond 

L'avantage d'une requete asynchrone est de pouvoir recuperer des donnees sans inter- 
rompre le travail de l'internaute. II est alors tres simple de mettre en place des systemes 
d' actualisation d'une information specifique d'une page HTML, declenches d'une 
maniere chronique ou par un gestionnaire d'evenements JavaScript. On peut alors imagi- 
ner, par exemple, qu'une zone de page Web affichant les derniers resultats d'un match de 
tennis ou des elections en cours puisse actualiser ses informations a intervalles reguliers 
sans aucun rechargement de la page et sans que l'internaute n'ait besoin de sollicker la 
mise a jour des resultats (voir 1' atelier 10-5 qui illustre une application de ce type par un 
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exemple pratique). Pendant ce temps celui-ci peut utiliser les autres fonctionnalites de la 
page Web sans aucune perturbation, car l'application asynchrone ne bloque pas l'utilisation 
du navigateur pendant le traitement du serveur et actualise uniquement le resultat de la 
zone concernee. 



Completion automatique 

Depuis le lancement de Google Suggest en 2005 (voir figure 2-1) de nombreux sites ont 
integre des systemes d' auto-completion dans leur formulaire pour assister les internautes 
dans leur choix. Le systeme de completion automatique permet d'afficher dans une liste 
deroulante des suggestions pertinentes par rapport au debut de la saisie de l'internaute 
(voir l'atelier 15-2 qui illustre cette application par un exemple pratique). Le navigateur 
envoie pour cela au serveur le debut de la saisie de l'utilisateur, le serveur receptionne 
P information, la traite en recherchant les reponses possibles commencant par la chaine 
de caracteres receptionnee et renvoie ses suggestions au navigateur qui les affichera par 
exemple dans une liste deroulante. Ces suggestions peuvent etre actualisees a chaque 
nouveau caractere saisi, mais il est souvent plus judicieux de declencher Pactualisation 
de la liste selon un intervalle de temps defini afin de ne pas trop surcharger le serveur 
(voir par exemple le site de Google Suggest de la figure 2-1). 

Controle en temps reel des donnees d'un formulaire 

Dans un formulaire traditionnel, le controle des champs peut etre realise par des fonc- 
tions JavaScript au fil de la saisie si Pon desire simplement s'assurer de la presence ou 
de Padequation du contenu (le controle de la bonne syntaxe d'un e-mail par exemple). 
Par contre, pour des verifications plus poussees necessitant de comparer le contenu 
d'un champ avec des informations issues d'une base de donnees (comme la verifi- 
cation de l'existence d'un pseudonyme lors de la creation d'un compte utilisateur), 
on est alors contraint de realiser ces verifications cote serveur apres P envoi du formu- 
laire. 

Ajax peut alors etre utilise judicieusement pour realiser des tests lors de la saisie et done 
avant la soumission du formulaire. II suffit pour cela d'envoyer une requete au serveur 
des que le contenu du champ est connu (voir l'atelier 13-1 qui illustre cette application 
par un exemple pratique). Le serveur s'occupera du traitement de ce contenu en le 
comparant avec les informations de la base de donnees pendant que l'utilisateur conti- 
nuera de renseigner les autres champs. Si le controle s'avere negatif, le serveur renverra 
un message d'erreur au navigateur qui Pavertira et lui permettra de modifier sa saisie 
avant la soumission du formulaire. 



Navigation dynamique 

De nombreux menus de navigation ou onglets de pagination exploitent desormais la techno- 
logie Ajax afin d'eviter le rechargement de la page a chaque nouvelle selection (voir 
l'atelier 15-1 qui illustre cette application par un exemple pratique). Le resultat est en 
general assez agreable a utiliser car cette technologie permet une transition fluide et 
continue d'une page a 1' autre, mais il est souvent judicieux de la coupler avec des systemes 
alternatifs comme les cadres caches afin de conserver l'utilisation des boutons Suivant et 
Precedent et l'historique de navigation. 
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Lecture d'un flux RSS 

Les flux RSS permettent de diffuser les mises a jour des sites d'information sur d'autres 
sites ou applications tiers (page personnelle comme Netvibes, blog, gestionnaire de 
messagerie. . .). L'utilisateur peut s'abonner aux flux d' informations de son choix et afficher 
ainsi des nouvelles qui s'actualiseront automatiquement sur son site (voir l'atelier 12-6 
qui illustre cette application par un exemple pratique). 

Ces flux sont contenus dans un document au format XML, structure selon des items 
predefinis (titre, resume, date. . .). Ajax permet de recuperer ce type de flux et de l'afficher 
dans un navigateur apres 1' avoir converti au format HTML sans recharger la page (voir la 
presentation du site de Netvibes ci-dessous en guise d'exemple). 

Sauvegarde de documents editables 

L edition de documents en ligne est de plus en plus courante sur les sites communautaires. 
Elle permet de concevoir des documents riches (textes, images...) puis de les sauvegarder 
directement depuis un navigateur sans avoir recours a des formulaires de telechargement 
(voir l'atelier 13-2 qui presente une application de sauvegarde d' informations). 

Ces systemes caracterisent tres bien les applications de type Web 2.0 qui permettent a 
l'internaute de disposer de services avances proches de ceux proposes jusqu' a present par 
des logiciels de bureau. 

Personnalisation d'interface Web 

Si la personnalisation d'une interface Web (disposition et selection des blocs a afficher 
dans sa page Web personnelle, ou encore le choix de modeles de mise en page incluant la 
couleur, la police et bien d'autres parametres) peut etre realisee par les technologies du 
DHTML (JavaScript, DOM, CSS), leur memorisation est souvent effectuee par Ajax et 
notamment grace a l'objet XMLHttpRequest qui se chargera d' envoy er au serveur les 
nouveaux parametres de votre page personnalisee des qu'une modification de celle-ci 
sera detectee. 

Le site Netvibes illustre tres bien 1' utilisation de cette fonctionnalite d' Ajax (entre autres) 
pour permettre aux internautes d'amenager librement leur page personnelle. 



Widget 



Les widgets sont des petites applications Web qui ont l'enorme avantage de ne pas neces- 
siter la presence d'un navigateur pour fonctionner (voir l'atelier 15-3 qui illustre la mise 
en ceuvre d'un widget de calendrier). lis peuvent done etre places sur le bureau de votre 
ordinateur et etre deplaces comme bon vous semble (a l'origine, le concept des widgets 
vient d' Apple qui les avait deja integres dans le systeme d' exploitation Mac OS X 
version 10.4). 

De nombreux widgets exploitent Ajax pour recuperer des donnees sur un serveur d'infor- 
mations soit d'une maniere chronique, soit a la demande de l'utilisateur. Ainsi, si vous le 
desirez, vous pouvez placer un widget sur le bureau de votre ordinateur pour afficher en 
permanence les previsions meteorologiques ou les fluctuation d'une valeur boursiere. 

Le nouveau service Talk de Google est base sur un widget Ajax. II permet 1' utilisation 
d'une messagerie instantanee sans necessiter la presence d'un navigateur. Pour l'installer 
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sur le bureau de votre PC, il suffit de telecharger un petit logiciel gratuit propose en tele- 
chargement sur Google. 

Chargement progressif d information 

Le chargement de donnees volumineuses est un probleme qui freine fortement la reacti- 
vite d'un site. A l'ere du haut debit, il est maintenant difficilement concevable d'attendre 
plusieurs secondes pour que l'effet d'un evenement declenche par l'utilisateur puisse 
s'afficher sur l'interface du site. Cependant, certaines applications doivent interagir rapi- 
dement pour afficher de nouvelles images qu'il n'est pas toujours concevable de prechar- 
ger (comme les applications de cartographie par exemple). II faut alors faire appel a des 
methodes predictives couplees a des technologies client comme Ajax pour trouver une 
solution a ce dilemme. 

L' exemple de la cartographie Google Maps illustre bien cette utilisation en permettant a 
1' application de conserver une bonne reactivite lors du glisser-deplacer de la carte par 
exemple. 

Moteur de recherche sans rechargement de la page 

La plupart des moteurs de recherche necessitent un rechargement complet de la liste des 
resultats a chaque modification des criteres de recherche. II est cependant possible 
d'utiliser la technologie Ajax pour pallier ce desagrement (voir par exemple le moteur de 
recherche http://www.rollyo.com ou encore le moteur d' Amazon http://www.a9.com). 

Qui utilise Ajax ? 

Actuellement de nombreux sites de renom utilisent deja des applications Ajax pour 
ameliorer leur interface en augmentant l'interactivite avec les internautes et en apportant 
de nouvelles fonctionnalites, plus proches des applications d'ordinateur de bureau que 
des sites Web traditionnels. Nous vous proposons ci-dessous de faire un rapide tour 
d' horizon de ces sites precurseurs du Web 2.0. 

Google suggest 

Google suggest (voir figure 2-1) a ete le premier site a exploiter le modele Ajax pour 
ameliorer l'interface de son outil de recherche que tout le monde connait. Lorsque 
l'internaute renseigne le champ de recherche avec un mot-cle, une requete est envoyee au 
serveur a chaque nouveau caractere saisi afin d' afficher une liste de suggestions susceptibles 
de correspondre a votre recherche. 

Google suggest utilise l'objet XMLHttpRequest et le format JSON (et non le XML) pour 
gerer les echanges de donnees avec le serveur. 
httpS/www. google, com/web hp ?complete= 1&hl=en 



Gmail 



Gmail est un webmail gratuit mis a la disposition de tous les internautes par Google. A 
l'instar de son outil de recherche, Google doit la reussite de son webmail a la simplicite 
et la grande reactivite de son interface. 
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Gmail utilise l'objet XMLHttpRequest conjointement avec une structure de cadres caches 
afin d'eviter certains defauts inherents a l'utilisation exclusive de cet objet (boutons 
Precedent et Suivant inactifs). Pour la gestion du transfert des donnees, le format JSON a 
ete choisi afin d'ameliorer la rapidite des echanges entre le serveur et le navigateur. 

http://mail.google. com 



Google Maps 



Google Maps est le service de cartographie propose par Google. Le site Google Maps 
utilise des applications Ajax pour ameliorer l'interactivite avec l'internaute en lui offrant 
une interface tres intuitive. L'utilisateur peut par exemple faire glisser la carte dans toutes 
les directions de facon tres fluide grace au prechargement des images ou encore utiliser la 
molette de sa souris pour zoomer sans avoir a recharger la carte. 

Ici aussi, Google a opte pour l'utilisation de cadres caches. En ce qui concerne le trans- 
fert des informations retournees par le serveur, c'est le format XML qui a ete retenu, 
celui-ci permettant d'operer tres facilement des transformations de son contenu au 
moyen de fonctions XSLT. La gestion du cache du navigateur est aussi exploitee pour 
obtenir une bonne reactivite des deplacements ou des zooms de carte permettant ainsi 
l'affichage rapide des multiples petites images qui constituent la carte. 
http://maps.google.com 



Yahoo! News 



En 2005, Yahoo! News a aussi opte pour Ajax afin d'ameliorer l'interactivite de son 
interface. L'internaute pouvait alors voir le resume et la photo d'un article en passant 
simplement sa souris sur son titre. Des que l'evenement etait detecte, une requete XMLHttp- 
Request etait envoyee au serveur qui retournait rapidement les complements de l'article 
au navigateur. 

Cette application etant integree en complement d'une structure de page traditionnelle, 
elle permettait de disposer de fonctionnalites avancees tout en conservant un mode 
degrade pour les internautes ne disposant pas d'un navigateur compatible avec l'application 

Ajax. 

http://news.yahoo.com 



A9.com 



En 2005, Amazon a cree un meta-moteur qui permet de rechercher dans plusieurs types 
de medias en une seule requete (livre, video, definition, article...). Pour cela, il exploite 
plusieurs bases de donnees telles que Wikipedia, Answers.com et evidemment celle de 
son site de commerce en ligne, Amazon.com. Les resultats sont presentes dans des colonnes 
differentes en fonction de leur origine. Si vous desirez modifier les criteres de recherche, 
les boites contenant les resultats precedents sont alors redimensionnees automatiquement 
sans qu'un rechargement de la page ne soit necessaire. 

Pour les reconditionnements des boites des resultats, A9.com exploite des librairies 
DHTML. Les transferts de donnees entre le serveur et le navigateur sont eux realises 
grace a la classe XMLHttpRequest combinee avec une structure de cadres caches. 

http://www.a9.com 
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Google Calendar 



En avril 2006, Google complete ses services en mettant a la disposition des internautes 
un systeme d' agenda en ligne exploitant pleinement tous les artifices de la technologie 
Ajax. L'utilisateur peut ajouter tres facilement ses rendez-vous par un simple clic, il peut 
aussi les partager facilement avec d'autres utilisateurs de Google Calendar ou des 
personnes de son choix. Les rendez-vous peuvent etre deplaces ou agrandis tres rapide- 
ment a l'aide de la souris. L'affichage peut etre configure sur un jour, une semaine ou un 
mois, et cela sans aucun rechargement de la page. 

http://www.google. com/calendar 



Netvibes 



Netvibes est un portail personnalisable qui permet de creer et amenager sa page person- 
nels tres simplement. L'internaute peut ainsi ajouter, supprimer, modifier ou deplacer les 
differentes boites qui composent sa page. II pourra notamment configurer des flux RSS 
provenant de differents fournisseurs d' information pour en afficher le contenu dans la 
boite de son choix. 

Ce site illustre parfaitement l'utilisation que Ton peut faire d'Ajax et du DHTML pour 
mettre a la disposition de l'internaute des fonctionnalites riches du Web 2.0 tout en 
preservant l'ergonomie de la page Web. 

http://www. netvibes. com 



Google Talk 



L' application Google Talk vous permet de disposer d'une messagerie instantanee et 
d'un service de voix IP en permanence, meme si votre navigateur est ferme. L'utili- 
sation de cette application necessite neanmoins 1' installation d'un logiciel sur votre 
ordinateur. 

Google Talk est un widget Ajax base sur Jabber (systeme standard de messagerie instan- 
tanee utilisant le protocole XMPP, base sur le XML, developpe par Google) qui permet 
de discuter avec des millions d'internautes. 



http://www.google. com/talk 



Wikipedia 



Wikipedia est une encyclopedie collaborative en ligne tres connue, qui regroupe des 
millions d' articles sur des themes divers et varies. Chaque internaute peut y contribuer en 
redigeant un article selon sa specialite. 

Ce site exploite de nombreuses applications basees sur la technologie Ajax, comme les 
onglets dynamiques (le contenu de la zone d'information est modifie sans rechargement 
de la page) ou encore la gestion de ses ressources qui permet a chaque internaute d'editer 
en ligne des documents riches (textes, images...) sans employer de formulaire de tele- 
chargement. 

http://fr. wikipedia. org 
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Ajax, un amalgame de technologies 
Des ingredients deja operationnels 

Contrairement a ce que Ton pourrait croire, Ajax n'est pas une technologie specifique et 
innovante mais une conjonction de plusieurs technologies anciennes. Ainsi, les applications 
Ajax utilisent en general tout ou partie des technologies suivantes : 

• Les feuilles de styles CSS qui permettent d'appliquer une mise forme au contenu d'une 
page XHTML. 

• Le DOM qui represente la hierarchie des element d'une page XHTML. 

• Lobjet XMLHttpRequest de JavaScript qui permet d'assurer des transferts asyn- 
chrones (ou quelquefois synchrones) entre le client et le serveur. 

• Les formats de donnees XML ou JSON utilises pour les transferts entre le serveur et le 
client. 

• Le langage de script client JavaScript qui permet l'interaction de ces differentes techno- 
logies. 

L'interet pour Ajax d'utiliser ces differentes technologies est qu'elles sont deja integrees 
dans la plupart des navigateurs actuels. Elles sont done immediatement exploitables - 
meme si quelques differences d' implementation subsistent d'un navigateur a l'autre. 

Ceci represente une veritable aubaine pour les developpeurs lorsqu'on connait les atouts 
d'Ajax ; et on comprend mieux pourquoi toujours plus de developpeurs se rallient a cette 
technologie. 

JavaScript, le ciment des fondations d'Ajax 

Pour que ces differentes technologies sous-jacentes puissent etre exploiters, il faut dispo- 
ser d'un langage de script capable de les manipuler. Evidemment, dans ce contexte client, 
JavaScript est la technologie ideale pour remplir cette mission et faire interagir toutes ces 
technologies entre elles. Ainsi, dans chaque application Ajax, nous retrouverons un 
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programme JavaScript qui constituera le « moteur » du systeme, orchestrant a la fois les 
transferts de donnees avec l'aide de l'objet XMLHttpRequest et l'exploitation des reponses 
du serveur en agissant sur les CSS (pour modifier la mise en forme de la page XHTML) et 
sur le DOM (pour modifier le contenu ou la structure de la page XHTML) (voir figure 3-1). 



Figure 3-1 
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En ce qui concerne les donnees echangees, plusieurs formats peuvent etre utilises selon 
1' organisation et la complexite des flux d' informations. Les applications les plus simples 
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pourront se contenter de donnees au format texte (simples couples variable/valeur) alors 
que les systemes plus complexes devront choisir de structurer leurs donnees en XML (le 
DOM assurant ensuite 1' insertion des donnees XML dans la page XHTML) ou encore 
dans un format issu de la structure des objets JavaScript, le JSON. A noter que la plupart 
des requetes envoyees vers le serveur utilisent le format texte (les couples variable/valeur 
suffisent dans la majorite des cas), mais sachez qu'elles peuvent eventuellement aussi 
exploiter les formats XML ou JSON, de la meme maniere que les resultats retournes par 
le serveur au navigateur. 

Comparatif avec les applications Web traditionnelles 

Pour bien comprendre le fonctionne ment et connaitre les avantages d'un nouveau 
systeme, une bonne methode consiste a le comparer avec l'existant que Ton connait deja. 
Dans cette partie, nous allons utiliser cette methode en comparant le fonctionnement 
d'une application Ajax avec celui d'un site Web statique et celui d'un site Web dynamique. 

Fonctionnement d'une application Web statique 

Avec un site Web statique, la seule interactivite dont dispose l'internaute est de pouvoir 
passer d'une page HTML a l'autre par un simple clic sur les liens hypertextes presents 
sur une page. A chaque fois que l'internaute clique sur un lien, une requete HTTP est 
envoyee, etablissant du meme coup une communication avec le serveur. Cette commu- 
nication est de type synchrone, c'est-a-dire que des remission de la requete, la 
communication reste en place jusqu'a la reception de la reponse du serveur. Pendant le 
temps de traitement de la requete, le navigateur reste fige, bloquant ainsi toute action 
possible de l'internaute. 

A chaque requete, le serveur retournera une reponse sous la forme d'une page HTML 
complete. S'il s'agit d'une simple requete, suite a la saisie par l'internaute de l'URL 
specifique d'une page dans la barre d'adresse du navigateur ou, plus couramment, lors- 
que l'internaute clique sur un lien hypertexte, le serveur se contentera de renvoyer la 
page HTML demandee, ce qui cloturera le traitement cote serveur et debloquera ainsi le 
navigateur. 

Fonctionnement d'une application Web dynamique 

Nous avons vu precedemment le traitement d'une simple requete par le serveur mais 
d' autre cas peuvent se produire, notamment lors de l'envoi d'un formulaire. Dans ce cas, 
la requete est constituee d'une ligne de requete (precisant la methode utilisee et le proto- 
cole HTTP), d'un corps (qui contient les donnees envoyees au serveur dans le cas d'une 
requete emise avec la methode POST) et d'une serie d'en-tetes qui definissent les speci- 
ficites de la requete (nature du navigateur utilise, type d'encodage. . .) qui permettront au 
serveur de traiter correctement les informations. En general, lors de l'envoi d'un formu- 
laire, le traitement cote serveur est realise par une page contenant un programme (en PHP 
par exemple). Les donnees receptionnees pouvant etre traitees directement par le 
programme ou entrainer un echange avec un serveur de base de donnees afin de les 
memoriser ou d'emettre une requete SQL. A Tissue de ce traitement, une nouvelle page 
HTML sera construite a la volee et renvoyee au navigateur, ce qui cloturera le processus, 
debloquant le navigateur de la meme maniere qu'avec un site statique. 



Introduction a Ajax 



Partie I 

Fonctionnement dune application Ajax 

Dans le cas d'une application Ajax, si la page contenant la structure XHTML et ses 
scripts client (moteur Ajax, gestionnaire d'evenement...) est chargee de la meme 
maniere que pour un site statique, il n'en est pas de meme pour les interactions qui 
suivent entre le navigateur et le serve ur. Le moteur Ajax une fois charge dans le navi- 
gateur restera en attente de l'evenement pour lequel il a ete programme. Pour cela, 
un gestionnaire d'evenement JavaScript est configure pour appeler le moteur des 
l'apparition de l'evenement concerne. Lors de l'appel du moteur, un objet XMLHttp- 
Request est instancie puis configure, une requete asynchrone est ensuite envoyee au 
serveur. A la reception de celle-ci, le serveur demarrera son traitement et retournera la 
reponse HTTP correspondante. Cette derniere sera prise en charge par la fonction de 
rappel du moteur Ajax qui exploitera les donnees pour les africher a un endroit precis 
de l'ecran. 



Chronogrammes des echanges client-serveur 

Une des grandes differences entre une application Web traditionnelle et une application 
Ajax est liee a l'echange asynchrone de donnees entre le navigateur et le serveur. Pour 
vous permettre de bien apprehender la difference entre ces deux applications, nous vous 
proposons de les comparer maintenant a l'aide de leur chronogramme. 

Chronogramme d'une application Web dynamique traditionnelle 

Lorsqu'un utilisateur sollicite le serveur dans une application Web dynamique tradi- 
tionnelle (en envoyant un formulaire ou en cliquant sur une URL dynamique), il 
declenche une requete HTTP dans laquelle sont imbriques les parametres de la demande. 
A partir de ce moment, le navigateur se fige jusqu'a la reception de la reponse HTTP 
du serveur, interdisant ainsi a 1' utilisateur toute action pendant le temps de traitement 
de la requete. Des la reception de la requete, le serveur Web analysera les parametres et 
traitera la demande selon son programme. II pourra interroger un serveur de base de 
donnees pour recueillir des donnees complementaires si necessaire. Une fois le traite- 
ment termine, une page HTML complete sera construite a la volee, incluant les resultats 
du traitement apres leur mise en forme. Cette page sera alors retournee au navigateur 
apres son integration dans le corps de la reponse HTTP. A la reception de la reponse 
HTTP, le navigateur interpretera la page HTML, comme lors de l'appel d'une page Web 
dans un site statique, et l'affichera a l'ecran, entrainant le rechargement complet de la 
page. A la fin du chargement de la page, le navigateur est debloque et 1' utilisateur 
reprend la main sur 1' application. II pourra ainsi eventuellement reiterer une nouvelle 
demande serveur qui suivra le meme cycle de traitement que celui que nous venons de 
decrire (voir figure 3.2). 

Chronogramme d'une application Ajax en mode asynchrone 

Dans le cas d'une application Ajax en mode asynchrone, le deroulement du traitement est 
different. A noter que l'objet XMLHttpRequest peut aussi envoyer des requetes synchrones, 
mais dans ce cas le fonctionnement serait semblable a celui d'une application Web dyna- 
mique traditionnelle comme celle que nous avons decrite precedemment. 
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Figure 3-2 
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Dans une application Ajax, I'utilisateur doit commencer par appeler la page HTML 
contenant le moteur Ajax. Une fois la page chargee dans le navigateur, les echanges avec 
le serveur seront controles par l'application Ajax (voir figure 3-3). L'envoi d'une requete 
est souvent declenche par un gestionnaire d'evenement JavaScript, mais il peut aussi etre 
genere par un script de temporisation pour actualiser des informations a intervalles regu- 
liers. Quel que soit le mode de declenchement, le moteur Ajax est appele par le biais 
d'une fonction JavaScript. La premiere action du moteur est la creation d'un objet 
XMLHttpRequest immediatement suivi de sa configuration (choix de la methode de 
transfert GET ou POST, choix du fichier serveur sollicite, activation du mode asyn- 
chrone, designation d'une fonction de rappel, integration des parametres...). Une fois 
l'objet configure, l'envoi de la requete est declenche, generant une requete HTTP 
semblable a celle creee avec une application dynamique traditionnelle. Toutefois, dans le 
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cas de l'envoi d'une requete Ajax, le navigateur n'est pas bloque et l'utilisateur peut 
continuer a utiliser son interface comme bon lui semble ; le transfert est asynchrone. 
Cote serveur, les parametres seront analyses et le programme pourra aussi solliciter un 
serveur de base de donnees si besoin. Mais, contrairement a une application dynamique 
traditionnelle, le corps de la reponse HTTP retournee au navigateur ne sera pas compose 
de la page HTML complete : il contiendra seulement les donnees reclamees par le 
client. Lorsque le navigateur recoit la reponse, une fonction de rappel, programmed lors 
de l'envoi de la requete, se chargera de recuperer les donnees placees dans le corps de la 
reponse HTTP, de les mettre en forme et de les inserer dans une zone particuliere de la 
page Web et cela sans necessiter le rechargement de la page (voir figure 3-3). 



Figure 3-3 
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Les avantages d'Ajax 
Economie de la bande passante 

Avec Ajax, il n'est plus necessaire de renvoyer le contenu entier de la page HTML a 
chaque requete, car l'objet XMLHttpRequest assure la recuperation et l'insertion dans la 
page en cours des seules donnees a modifier. Ce systeme permet d'eliminer le transfert de 
nombreuses informations redondantes, allegeant ainsi fortement le trafic reseau entre le 
serve ur Web et le client (navigateur). 

Empeche le rechargement de la page a chaque requete 

Le traitement traditionnel d'une requete HTTP entraine a chaque retour de la reponse du 
serveur un rechargement complet de la page en cours. Hormis le desagreable « trou 
blanc » que cela engendre, ce phenomene allonge le temps de traitement d'une requete 
aux depens de la reactivite de 1' application. 

Evite le blocage de I'application pendant le traitement de la requete 

Contrairement au simple echange HTTP d'une application traditionnelle, dans laquelle 
I'application cliente est bloquee pendant tout le temps d'attente de la reponse du serveur, 
l'echange XMLHttpRequest asynchrone d'une application Ajax permet a l'internaute de 
continuer a travailler pendant le temps de traitement de la requete. Cela ouvre des possi- 
bility nouvelles pour le developpement Web, permettant ainsi aux developpeurs de creer 
des applications dont le mode de fonctionnement se rapproche de celui des applications 
disponibles jusqu'alors sur des ordinateurs de bureau. 

Augmente la reactivite de I'application 

Les donnees renvoyees par le serveur etant plus legeres (le serveur retournant unique - 
ment les donnees demandees et non la page HTML entiere) et le rechargement de la page 
complete n'ayant plus lieu a chaque requete, cela ameliore considerablement la reactivite 
du systeme. De plus, le chargement progressif des donnees couple a une methode predic- 
tive permet de disposer de fonctionnalites graphiques avancees (deplacement d'une carte 
a l'aide de la souris dans une application de cartographie en ligne par exemple) 
jusqu'alors reservees aux logiciels autonomes de bureau. 

Ameliore I'ergonomie de /'interface 

Une interface Ajax peut etre composee de multiples zones ay ant une gestion du contenu 
independante l'une de l'autre. Chaque zone pouvant declencher ses propres requetes, il 
est desormais possible d'avoir une mise a jour ciblee des contenus. Ainsi, grace aux techno- 
logies DHTML associees a Ajax, l'utilisateur peut amenager librement ses differentes 
zones par un simple glisser-deposer et ameliorer I'ergonomie de son interface Web. 

Les inconvenients d'Ajax 

Pas de memorisation des actions dans I'historique 

Le principal inconvenient d'une application Ajax est lie au fait que les actions de l'utili- 
sateur ne sont pas memorisees dans I'historique du navigateur. En effet, les differents 
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contenus d'une application Ajax s'affichant toujours dans la meme page, ils ne peuvent 
pas etre enregistres dans l'historique du navigateur comme le seraient les differentes 
pages HTML d'une application Web traditionnelle. 

Par voie de consequence, les boutons Suivant et Precedent ne sont plus utilisables car ils 
s'appuient sur l'historique du navigateur pour trouver la page suivante ou precedente. 
Ceci est evidemment tres handicapant pour les internautes qui ont l'habitude d'utiliser 
ces boutons pour naviguer d'une page a 1' autre. 

II existe neanmoins des solutions pour remedier a ce probleme en couplant 1' application 
Ajax avec un systeme d'iframe comme le fait Google dans plusieurs de ses applications Ajax 
mais cela necessite un traitement supplementaire qui complexifie le developpement. 

Probleme d'indexation des contenus 

Les differents contenus d'une application Ajax s'affichant dans une seule et meme page, 
les moteurs de recherche pourront indexer uniquement le premier contenu par defaut de 
la page et non tous les contenus proposes par 1' application. 

D'autre part, le rappel des differents contenus d'une application Ajax par le biais des 
favoris sera confronte au meme probleme. Seul le contenu de la premiere page pourra 
etre memorise dans les signets du navigateur. 

Dependance de I'activation de JavaScript sur le navigateur 

Les applications Ajax utilisant JavaScript pour interagir entre les differentes technologies 
exploiters cote client (CSS, DOM, XML...) sont done dependantes de I'activation de 
JavaScript sur le navigateur, au meme titre que tous les autres programmes clients utilisant 
cette technologie. 

Meme si les internautes qui desactivent JavaScript se rarefient, il faut toutefois prevoir 
une version degradee de 1' application en prevision des navigateurs qui ne supporteraient 
pas ce langage de script. 

Les cadres caches, une solution alternative a Ajax 

Dans le chapitre precedent, nous avons cite d' autres technologies estampillees Web 2.0 
(Flash + Flex, application Java) permettant la mise en ceuvre d'une application Internet 
riche (RIA). Nous avions cependant ecarte ces solutions car elles ne pouvaient pas fonc- 
tionner sur un navigateur sans 1' installation d'un plug-in. 

II existe neanmoins une technique nominee « cadre cache » (frameset HTML ou iframe) 
utilisee bien avant celle de l'objet XMLHttpRequest qui permet d'etablir des communi- 
cations en arriere plan avec le serveur et qui, comme Ajax, ne necessite pas l'ajout d'un 
plug-in. 

La technique du cadre cache 

Cette technique exploite la structure des jeux de cadres HTML dont l'un d'entre eux est 
invisible et sert de pont pour etablir une communication avec le serveur. Le cadre cache est 
rendu invisible en configurant sa largeur et sa hauteur a zero pixel. Avec cette technique, 
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il est alors possible d'envoyer des requetes serveur par le biais du cadre cache sans 
perturber l'ecran de l'utilisateur. 

Pour illustrer le fonctionnement de cette technique, nous allons detailler le cycle d'une 
communication complete entre le navigateur et le serveur. Pour commencer, l'utilisateur 
declenche une fonction JavaScript depuis le cadre visible. Cette fonction appellera un 
script serveur dont le retour sera assigne au cadre cache. Le script serveur analyse alors 
les parametres communiques et traite la demande. II renvoie ensuite en reponse au cadre 
cache une page HTML complete contenant le resultat dans une balise <div>. Dans cette 
meme page HTML se trouve une fonction JavaScript qui sera invoquee des que la page 
sera completement chargee dans le cadre cache (avec le gestionnaire d'evenement 
window. onload par exemple). Enfin, lorsque la fonction JavaScript s'execute dans le cadre 
cache, elle recupere le resultat insere prealablement dans la balise <di v> de la meme page 
et l'affecte a une zone definie du cadre visible. L'utilisateur peut alors voir la reponse 
apparaitre dans la page visible du navigateur et cela tout en continuant d'utiliser l'inter- 
face pendant le traitement serveur evitant ainsi que la page ne soit rechargee. 

Depuis l'apparition des iframes (introduites dans la version 4.0 du HTML), il est possible 
d' exploiter la meme technique mais sans avoir a utiliser la structure contraignante des 
framesets. En effet, l'iframe peut etre place dans une page HTML traditionnelle et 
permet de creer ainsi un cadre dans n'importe quelle page existante. II est meme possible 
de creer des iframes a l'aide d'un programme JavaScript, ce qui permet de mieux controler 
la creation et la suppression des flux de communication entre le serveur et le navigateur. 

Avantages des cadres caches 

Fonctionne sur les anciens navigateurs 

Cette technique etant pratiquee depuis longtemps, elle peut etre utilisee sur des naviga- 
teurs plus anciens qui ne supportaient pas encore les objets XMLHttpRequest. II est done 
possible d'utiliser la technique des cadres caches en tant que solution alternative a Ajax 
si Ton desire que 1' application fonctionne sur une plus grande variete de navigateurs. 

Conserve I'historique du navigateur 

La technique des cadres caches permet de conserver I'historique du navigateur. Cette 
caracteristique permet aux internautes de continuer a utiliser les boutons Suivant et 
Precedent du navigateur contrairement aux applications Ajax. A noter que certaines 
applications couplent Ajax a la technique des cadres caches pour remedier au probleme 
des boutons Suivant et Precedent inactifs (comme Gmail et Google Maps par exemple). 

Inconvenients des cadres caches 

Manque d'informations sur le traitement de la requete 

Le principal inconvenient de la technique des cadres caches est lie au manque d'informations 
concernant le traitement de la requete HTTP en arriere-plan. Cela pose de gros problemes 
dans le cas ou la page du cadre cache n'est pas chargee, car l'internaute peut attendre 
indefiniment la reponse sans etre informe de l'incident. Meme s'il est possible de program- 
mer une temporisation pour interrompre le traitement et informer l'utilisateur au bout 
d'un temps determine, il est preferable desormais d'utiliser un objet XMLHttpRequest 
qui nous permet de garder le controle de toutes les etapes du traitement de la requete 
HTTP. 
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HTTP et I'objet 
XMLHttpRequest 



Bien qu'il ne soit pas recent, I'objet XMLHttpRequest n'a pas ete tres utilise avant 
l'apparition d'Ajax (contrairement aux autres technologies utilisees telles que CSS, 
DOM, XML, JavaScript usuel...), aussi nous avons decide de lui consacrer un chapitre 
complet et de vous le presenter des maintenant afin que vous puissiez mieux comprendre 
le fonctionnement des communications asynchrones qui caracterisent les applications 
Ajax. 



Ressources sur les technologies utilisees par Ajax 

A la fin de cet ouvrage, vous trouverez de nombreuses ressources sur les technologies sous-jacentes 
d'Ajax que nous vous avons presentees dans le chapitre precedent (CSS, DOM, JavaScript, XML...). 
Nous avons opte pour cette organisation de sorte a ne pas surcharger inutilement la progression de votre 
apprentissage sur Ajax tout en vous permettant d'aller puiser des complements d'information (voire vous 
initier) sur certaines technologies qui pourraient vous faire defaut pour la comprehension des scripts de 
cet ouvrage. 



Rappels sur le protocole HTTP 

Pour les applications Ajax et comme pour la plupart des applications Web traditionnelles, 
les transferts de donnees entre le serveur Web et le client (le navigateur) utilisent le proto- 
cole HTTP (HyperText Transfer Protocol). Pour mieux comprendre les rouages des 
mecanismes de I'objet XMLHttpRequest, il est interessant de faire un petit rappel du 
mode de fonctionnement de ce protocole tres souvent utilise sur Internet. 

Un transfert HTTP se compose de deux elements : les requetes (GET ou POST) envoyees 
par le navigateur et la reponse retournee au navigateur par le serveur. 
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Les requetes HTTP 

Pour envoyer une requete HTTP au serveur depuis un navigateur, deux methodes peuvent 
etre utilisees : GET ou POST. 



Comment indiquer la methode choisie en Ajax ? 

Dans le cas d'un simple formulaire, on precise la methode choisie en I'indiquant en tant que valeur de 
I'attribut method de la balise du formulaire (<form method="get"> par exemple) alors que dans le cas 
d'Ajax, elle sera notifiee dans le premier parametre de la methode open( ) de I'objet XMLHttpRequest 
(objetXHR.open( 'get' , 'monFichier.php?val = '+i .true) par exemple. La methode openO et les 
autres methodes et proprietes de I'objet XMLHttpRequest sont detailles plus loin dans ce meme chapitre. 



Requete avec la methode GET 

Une requete GET peut etre initiee par un formulaire (dont I'attribut method serait configure 
avec la valeur GET) mais aussi a partir d'un simple lien hypertexte auquel les valeurs a 
envoyer seront associees a l'URL sous forme de couple variable/valeur apres un point 
d' interrogation (voir code 4-1). 

Code 4-1 : 

| monProgramme.php?message=coucou 

Si plusieurs couples de variable/valeur doivent etre envoyes, ils sont alors separes par une 
esperluette (voir code 4-2). 

Code 4-2 : 

| monProgramme.php?message=coucou8inoni=toto 

Parmi les inconvenients de la methode GET, notons que la taille d'une requete GET etant 
limitee a 255 octets (ou 1024 selon les systemes), le nombre d' informations envoyees par 
cette methode se trouve du meme coup reduit. En outre, les valeurs etant envoyees dans 
l'URL, elles sont done visibles par tous. Les requetes GET ne pourront done pas etre utilisees 
pour envoyer des informations volumineuses ou si la confidentialite des informations 
doit etre preservee. 

Les avantages de la methode GET sont principalement sa simplicite et la possibilite de 
construire dynamiquement des pseudo-URL dans lesquelles sont integrees les valeurs a 
envoyer (ce qui est bien pratique dans les sites catalogues pour afficher la fiche d'un 
produit specifique a partir des liens hypertextes d'une liste, par exemple : 
fiche.php?id=5). A noter que la methode GET est aussi souvent utilisee dans les requetes 
des moteurs de recherche en raison de la possibilite offerte a l'internaute d'enregistrer la 
requete dans ses favoris. 

Quelle que soit l'origine d'une requete GET (formulaire ou lien hypertexte avec parame- 
tres), le serveur receptionnera un ensemble d' informations composees d'une ligne de 
requete et de plusieurs lignes d'en-tete (pour les requetes GET, le corps de la requete est 
vide car les valeurs sont inserees dans la ligne de requete, voir code 4-4). 

Code 4-3 : Exemple d'URL absolue avec ses parametres : 

http://www.eyro! les . f r/monRepertoi re/monProgramme.php?message=coucou 
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Code 4-4 : Exemple simplifie d'une requete HTTP avec la methode GET initiee par l'URL 
du code 4-3 : 



1 : Ligne de requete 


GET /monRepertoire/?message=coucou HTTP/1.1 


2 : Lignes d'en-tete 





Host: www.eyrolles.fr 

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 

*Firef ox/1. 0.1 

Connection: Keep-Alive 



3 : Corps de la requete (vide dans le cas d'une requete GET) 



I 

Requete avec la methode POST 

Contrairement a la methode GET, les valeurs envoyees avec la methode POST ne sont pas 
visibles dans la barre d'adresse (ce qui est appreciable si vous desirez envoyer des mots 
de passe par exemple. . .) mais placees dans une variable d'environnement inseree dans le 
corps de la requete (et done invisible par l'internaute). Le nombre d' informations n'est 
plus limite comme pour la methode GET et cette methode offre ainsi la possibility de trans- 
mettre des flux de donnees beaucoup plus importants (jusqu'a 2Go). Par contre, les 
donnees envoyees avec la methode POST ne peuvent etre transmises que par un formulaire 
(ou par la methode openO d'un objet XMLHttpRequest en ce qui concerne les applications 
Ajax) et non plus par une URL comme avec la methode GET. 

A noter enfin que, contrairement a une requete GET pour laquelle certains navigateurs (IE 
par exemple) recuperent automatiquement les precedentes donnees dans la memoire 
cache, il n'en n'est pas de meme avec la methode POST qui necessite 1' autorisation de 
l'internaute pour renvoyer les parametres (quel que soit le navigateur utilise). 

Dans le cas d'une requete POST, le serveur receptionnera un ensemble d' informations 
composees d'une ligne de requete, de plusieurs lignes d'en-tete et d'un corps de requete 
contenant les valeurs a transmettre (voir code 4-5). 

Code 4-5 : Exemple simplifie d'une requete HTTP avec la methode POST initiee par un 
formulaire contenant un seul champ nomme « message » : 

1 : Ligne de requete 

POST /monRepertoire/ HTTP/1.1 

2 : Lignes d'en-tete 
Host: www.eyrolles.fr 

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 
*-Firef ox/1. 0.1 

Content-type: appl ication/x-www-form-urlencoded 
Content-Length: 15 
Connection: Keep-Alive 

3 : Corps de la requete 
message=coucou 
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Si Ton compare les informations d'une requete POST (voir code 4-5) avec celles d'une 
requete GET (voir code 4-4), on remarque que les donnees a transmettre sont maintenant 
inserees dans le corps de la requete et que deux nouveaux en-tetes ont ete ajoutes. L'en- 
tete Content-type qui precise l'encodage utilise (a noter qu'il s'agit toujours du meme 
type MIME quel que soit le navigateur) pour le corps de la requete — qui contient main- 
tenant les donnees — et l'en-tete Content-Length qui indique la taille en octets des 
donnees contenues dans le corps de la requete. 



La reponse HTTP 



Le traitement par le serveur d'une requete HTTP renvoie un ensemble d'informations au 
navigateur qui a initie la demande (voir code 4-6). Si on observe ces informations, on 
peut distinguer trois parties differentes : 

La ligne de statut (voir le repere 1 du code 4-6) qui rappelle la version du protocole 
HTTP utilise (HTTP/1 . 1 dans l'exemple) suivi du statut de la reponse (information impor- 
tante pour Ajax comme 200, qui signifie le succes de l'operation) et d'un message 
complementaire (OK par exemple). 

Un nombre variable de lignes d'en-tete (voir le repere 2 du code 4-6) contenant entre 
autres l'en-tete Content- Type qui indique le type MIME du resultat (information impor- 
tante pour Ajax). Ce type peut par exemple etre text/pl a i n pour du texte brut, text/html 
pour une page HTML ou encore text/xml pour du XML. Signalons aussi l'en-tete Cache- 
Control interessant pour Ajax car il permet d'interagir sur le cache du navigateur. 

Le contenu de la reponse renvoyee (voir le repere 3 du code 4-6) peut etre une page 
HTML complete comme dans l'exemple ci-dessous mais dans le cas d'Ajax, le contenu 
de la reponse sera surtout constitue de donnees seules (au format texte ou XML), ou 
encore de fragments HTML pour les reponses generees suite a une requete d'une appli- 
cation Ajax. En effet, nous avons vu precedemment que l'un des avantages d'une application 
Ajax est justement de pouvoir recuperer le minimum utile du serveur et non pas la page 
complete comme pour les requetes Web traditionnelles. 

Code 4-6 : Exemple d'une reponse HTTP serveur : 

1 : Ligne de statut 

HTTP/1.1 200 OK 

I 1 

2 : Lignes d'en-tete 

Cache-Control: private 

Content-type: text/html 

Server: GWS/2.1 

Date:Tue, 15 Jun 2007 13:20:24 GMT 



3 : Contenu de la reponse 

<html> 

<head> 

<title>Reponse</title> 

</head> 

<body> 

Hello 

</body> 

</htm1> 
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Selon la reponse du serveur, le code du statut HTTP peut changer. Nous verrons par la 
suite que ce code devra etre teste par le script du moteur Ajax afin de s' assurer que 
1' operation a ete effectuee avec succes. II est done utile de connaitre les principaux codes 
de statut HTTP que le serveur peut renvoyer. Ces codes sont rappeles dans le tableau 4-1. 

Tableau 4-1 Principaux codes de statut HTTP. 



Code de statut 


Signification 


Exemple/Message 


200 a 299 


Succes de I'operation 


200/OK : Requete accomplie avec succes 


300 a 399 


Redirection 


301 /Moved Permanently : Redirection permanente 


400 a 499 


Erreur client 


404/Not Found : Document non trouve 


500 a 599 


Erreur serveur 


503/Service Unavailable : Service non disponible 
I 



Caracteristiques de lobjet XMLHttpRequest 

La communication des applications Ajax avec le serveur repose essentiellement sur 
l'objet XMLHttpRequest. Cette classe JavaScript permet d'executer des requetes HTTP 
du navigateur vers le serveur d'une maniere asynchrone (reponse differee sans blocage 
de 1' application client) sans avoir a recharger la page HTML comme e'est le cas lors 
d'une requete HTTP traditionnelle. 

Deja operationnel depuis 1998 

L'objet XMLHttpRequest n'est pas recent car la classe qui permet de l'instancier a vu le 
jour en 1998. A l'epoque, Microsoft l'avait developpe pour l'integrer sous forme de 
controle ActiveX dans son navigateur Internet Explorer 5.0. 

Tres peu utilise jusqu'a l'avenement Ajax, il a cependant ete implements progressi- 
vement dans la plupart des navigateurs et meme fait l'objet d'un projet de specification 
duW3C depuis 2006. 

Tableau 4-2 Progression de limplementation de la classe XMLHttpRequest 
dans les differents navigateurs 



Annee d'implementation 


Navigateur(s) concerne(s) 


1998 


Internet Explorer 


2002 


Mozilla 


2004 


Safari 


2005 


Konqueror et Opera 



Une instanciation en cours d'homologation 

Si cette classe est implementee dans les principaux navigateurs du moment, la procedure 
d' instanciation d'un objet n'est malheureusement pas encore standardised pour tous 
(meme si l'homogeneisation de son utilisation devrait bientot voir le jour). En effet, 
comme a l'origine la classe a ete creee en tant que controle ActiveX, la procedure 
d' instanciation avec Internet Explorer (utilisation du constructeur ActiveX0bject( )) 
est differente des autres navigateurs (utilisation du constructeur XMLHttpRequestO). 
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De plus, la valeur a passer en parametre lors de l'instanciation d'un objet dans un naviga- 
teur Microsoft est differente entre la premiere version d' Internet Explorer sur lequel cette 
classe a ete implementee (la version IE 5.0) et les versions ulterieures. On se retrouve 
done avec 3 syntaxes d'instanciation differentes selon le navigate ur utilise ! 

Pour contourner ce probleme, une methode judicieuse consiste a developper une fonc- 
tion de creation generique de l'objet XMLHttpRequest prenant en compte la detection 
du navigateur (et aussi sa version pour IE) afin d'utiliser la bonne syntaxe d'instan- 
ciation selon le contexte. Cette fonction peut etre avantageusement integree dans un 
fichier JavaScript externe qui sera lie aux pages HTML utilisant Ajax. A noter que si 
vous utilisez des frameworks (comme j Query ou Prototype par exemple) la fonction- 
nalite de detection du navigateur est en general integree dans leur bibliotheque Java- 
Script. 

Tableau 4-3 Syntaxe a utiliser pour l'instanciation d'un objet XMLHttpRequest 
selon les navigateurs et leurs versions. 



Navigateurs concernes 

Internet Explorer 5.0 

Internet Explorer version ulterieure a 5.0 

Autres navigateurs (Firefox...) 



Syntaxe d'instanciation d'un objet XMLHttpRequest 

newActiveXObject("Microsoft.XMLHttp") 

newActiveXObject("Msxml2.XMLHttp") 

newXMLHttpRequest() 



Pour illustrer la creation d'un objet XMLHttpRequest en JavaScript, vous trouverez ci- 
dessous un exemple de fonction generique de creation d'un objet XMLHttpRequest 
selon le navigateur utilise. 

Code 4-7 : Fonction generique de creation d'un objet XMLHttpRequest : 



function creationXHR( ) { 
var resul tat=null ; 

try {//test pour les navigateurs : Mozilla, Opera... 
resul tat= new XMLHttpRequestO; 
} 
catch (Error) { 

try {//test pour les navigateurs Internet Explorer > 5.0 
resultat= new ActiveXObjectC'MsxmlZ.XMLHTTP"); 
} 

catch (Error) { 
try {//test pour le navigateur Internet Explorer 5.0 
resultat= new ActiveXObjectC'Microsoft.XMLHTTP"); 
} 

catch (Error) { 
resul tat= nul 1 ; 



return resultat; 

} 

La fonction JavaScript ci-dessus peut etre incorporee directement dans la page HTML 

mais il est plus judicieux de la saisir dans un fichier JS externe et de le lier 

ensuite a la page HTML concernee afin de pouvoir en disposer facilement dans les 
autres pages du site. 
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v§r objetXHR = creationXHRO ; 



La ligne de code ci-dessus est un exemple d'util isation de la fonction generique pour 
creer un objet XMLHttpRequest. 

La fonction du code 4-7 teste successivement la creation de l'objet XMLHttpRequest 
avec des syntaxes d'instanciation differentes correspondant aux trois types de naviga- 
teurs. La structure de gestion des exceptions (try) permet de tester une fonction sans pour 
autant generer d'erreur. Si le test est positif, l'objet est cree et, dans le cas contraire, elle 
passe au test suivant et poursuit le meme processus (catch). 



Ressources sur les technologies associees 

Si la syntaxe du code de cette fonction ne vous semble pas evidente, 
ressources sur le JavaScript (et notamment sur la gestion des exceptions 
fin de cet ouvrage. 


vous 
: try 


pouvez 
catch 


vous referer 
) regroupees 


aux 
a la 



Proprietes et methodes de l'objet XMLHttpRequest 

Comme toutes les classes, XMLHttpRequest possede des proprietes et des methodes. 
Avant de les utiliser pour mettre en oeuvre une requete serveur, nous vous proposons de 
les presenter dans les tableaux 4-4 et 4-5 ci-dessous. 

Tableau 4-4 Proprietes de l'objet XMLHttpRequest. 



Proprietes Description 


onreadystatechange 


Designe une fonction de rappel qui sera appelee a chaque fois que I'etat du traitement 
d'une requete asynohrone (readyState) changera d'etat. 


readyState 


Etat du traitement d'une requete asynohrone (valeur numerique de a 4, voir le tableau 4-6 
pour connaitre les different^ etats et leur signification). 


responseText 


Contient le resultat du serveur sous forme de texte. 


responseXml 


Contient le resultat du serveur sous forme XML. 


status 


Contient le code de statut HTTP (exemple : 200, voir tableau 4-1 ). Ce code est disponible 
en lecture uniquement lorsque la reponse a ete transmise. 


statusText 


Contient le message de statut HTTP (exemple : OK, voir tableau 4-1). Ce texte est dispo- 
nible en lecture uniquement lorsque la reponse a ete transmise. 



Tableau 4-5 Methodes de l'objet XMLHttpRequest 



Methodes 

abort() 
getAIIResponseHeadersf) 

getResponseHeaderf nomEnTefe") 



Description 

Annule la requete en cours. 

Retourne dans une chaine de caracteres tous les en-tetes HTTP conten us 
dans la reponse du serveur. Cette methode n'est utilisable que lorsque 
I'etat du traitement (readyState) est egal a 3 ou 4 (Interactive ou Completed). 

Retourne la valeur de I'en-tete dont le nom est indique dans le parametre 
(nomEnTete). Cette methode n'est utilisable que lorsque I'etat du traite- 
ment (readyState) est egal a 3 ou 4 (Interactive ou Completed). 
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Tableau 4-5 Methodes de I'objet XMLHttpRequest (suite) 



open(" methode" ," urf " async") 


Initialise I'objet en precisant certains parametres de la requete : la 
methode utilisee (methode : GET ou POST), I'URL du script cote serveur 
(url: fichier.php par exemple) et un troisieme parametre en option pour 
indiquer si la communication doit etre asynchrone (async : true) ou syn- 
chrone (async: false). 


sendfcofifem/') 


Envoie la requete. Le parametre (contenu) pourra prendre la valeur nul 1 
dans le cas d'un requete initialised avec la methode GET ou une chaine 
de requete dans le cas d'une methode POST. Evidemment cette methode 
ne peut etre utilisee que lorsque la methode open() a deja ete configured 
et done que lorsque I'etat du traitement (readyState) est egal a 1 (Loading). 


setRequestHeader(" notrt,"valeuf) 


Attribue une valeur (valeur) a I'en-tete de la requete dont le nom est spe- 
cific dans le premier parametre (nom). Cette methode n'est utilisable que 

lorsque I'etat du traitement (readyState) est egal a 1 (Loading). 
I 



Tableau 4-6 Signification des differents etats de traitement d'une requete asynchrone 
(accessible grace a la propriete « readyState ») 



Valeur Etat Signification 





Unitialized 


Lobjet n'a pas encore ete initialise et done la methode open( ) n'a pas encore ete 
appelee. 


1 


Loading 


Lobjet a ete initialise mais la requete n'a pas encore ete envoyee a I'aide de la 
methode sendO. 


2 


Loaded 


La requete a ete envoyee a I'aide de la methode send( ) . 


3 


Interactive 


La reponse est en cours de reception. 


4 


Completed 


La reponse du serveur est completement receptionnee. Les donnees sont disponi- 
bles dans la propriete responseText (s'il s'agit de donnees texte) oudans respon- 
seXML (s'il s'agit de donnees XML). 



Restriction d'acces aux domaines externes 

Pour eviter des utilisations malveillantes d'une application Ajax qui recupererait des donnees d'un autre 
site sans I'autorisation de son proprietaire, les navigateurs ont integre un systeme de securite qui interdit 
les appels Ajax vers des domaines differents de celui dans lequel se trouve I'application Ajax. 

Cependant, dans certains cas il est necessaire d'acceder a des ressources placees sur un serveur 
externe ou mis a disposition par un fournisseur d'information (cas des flux RSS par exemple). Pour detour- 
ner cette contrainte, il est alors possible de mettre en ceuvre un serveur mandataire (proxy) qui aura pour 
fonction de relayer des requites entre le serveur Web et le serveur fournisseur d'information. 



Creation de moteurs Ajax de base 
Envoi d'une requete synchrone sans parametre 

Meme si I'objet XMLHttpRequest est tres souvent exploite en mode asynchrone, il est 
aussi capable de gerer des requetes synchrones. Dans ce cas, le troisieme parametre de la 
methode openO doit etre configure avec la valeur false et le traitement sera sequentiel 
(voir code 4-8). Ce mode de fonctionnement s'apparente plutot au processus d'une 
requete Web traditionnelle (blocage de I'application client dans l'attente de la reponse du 
serveur) et l'utilisation de I'objet XMLHttpRequest a beaucoup moins d'interet que dans 
le mode asynchrone que nous allons traiter ci-apres. 
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Codes didactiques 

Les differents codes de ce chapitre ont ete elabores pour vous permettre de comprendre les mecanismes 
d'une application Ajax d'une maniere progressive, lis sont souvent incomplets et nous vous conseillons de 
ne pas essayer de les tester en pratique mais de vous concentrer plutot sur leur analyse. Nous repren- 
drons ces scripts de base a partir du chapitre 7 dans lequel vous aurez tout loisir de mettre en ceuvre vos 
premieres applications Ajax. 



Code 4-8 : Exemple de traitement d'une requete synchrone (ce code necessite la declaration 
prealable de la fonction creati onXHR( ) definie dans le code 4-7) :. 



-MOTEUR AJAX- 
//instanciation de 1'objet XMLHttpRequest 
var objetXHR = creationXHRO ; 

// Traitement SYNCHRONE 

//Configuration de la methode utilisee, du script serveur cible 

//et enfin activation du type synchrone en dernier parametre 

objetXHR. open ("get" , "script. php" .false) ; 

//envoi de la requete 

objetXHR. send(null ); 

//recuperation de la reponse du serveur 

var resultat = objetXHR. responseText ; 

//Le resultat peut maintenant etre insere dans la page HTML 
//si le script serveur correspond a celui de 1'encadre, la valeur 
//de la variable "resultat" serait alors egale a "Bonjour" 
-FIN DU MOTEUR AJAX- 



La premiere ligne de code cree 1'objet XMLHttpRequest par instanciation de sa classe. 
Des que 1'objet est cree, il est alors possible d'initialiser la requete a l'aide de la methode 
open( ). Dans le cas d'une requete synchrone, le troisieme parametre de cette methode devra 
etre configure avec la valeur false. II suffit ensuite d'envoyer la requete avec la 
methode send (null ) (a noter que l'argument de la methode send( ) estegalanull car 
la methode de la requete est initialisee avec GET) et d'attendre la reponse dans la propriete 
responseText de 1'objet. 



Reponse HTTP du serveur a une requete sans parametre 

Pour que vous puissiez bien apprehender tous les aspects de ce processus de communication HTTP, 
nous vous proposons un exemple de script serveur tres simple qui pourra etre utilise avec les exemples de 
moteurs Ajax sans parametre que nous vous proposons dans cette partie. Ce script est volontairement 
minimaliste afin que vous puissiez concentrer votre attention sur le moteur Ajax et non sur le traitement 
cote serveur. 

Code 4-9 : Exemple de code PHP du fichier script.php : 

<?php 

//indique que le type de la reponse renvoyee au client sera du texte 

header( "Content-Type: text/plain" ) ; 

//retourne la reponse au client a l'aide de la commande echo 

echo "Bonjour"; 

?> D3P 
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Reponse HTTP du serveur a une requete sans parametre (suite) 

Dans ce contexte, la reponse HTTP du serveur a une requete simple (sans parametre) pourrait ressembler a 
I'exemple ci-dessous. 

HTTP/1.1 200 OK 

Cache-Control: private 

Content-type: text/plain 

Server: GWS/2.1 

Date:Tue, 15 Jun 2007 13:20:24 GMT 

Bonjour 



Envoi d'une requete asynchrone sans parametre 

Contrairement au mode synchrone, le mode asynchrone necessite 1' utilisation d'une 
fonction de rappel. Cette fonction de rappel devra etre declaree et designee avant l'envoi 
de la requete de sorte a ce que le moteur Ajax puisse ensuite l'appeler lors de la reception de 
la reponse du serveur. Pour designer la fonction de rappel, son nom devra etre memorise 
dans la propriete onreadystatechange de l'objet XHR (voir repere 1 dans le code 4-10). 
Ainsi, la fonction designee comme fonction de rappel sera appelee a chaque changement 
de la propriete readyState. La propriete readyState correspond aux differents etats de trai- 
tement d'une requete Ajax (revoir tableau 4-6), elle changera done plusieurs fois d'etat 
au cours du cycle de chaque requete. Comme nous ne desirons recuperer le resultat que 
lorsqu'il sera completement receptionne, il faut done ajouter un test dans la fonction de 
rappel (voir repere 2 du code 4-10) afin de s'assurer que la propriete readyState est egale 
a la valeur 4 (etat Compl eted ) avant de copier le resultat dans une variable pour sa future 
exploitation (voir code 4-10). 

Code 4-10 : Exemple de traitement d'une requete asynchrone (ce code necessite la decla- 
ration prealable de la fonction creati onXHR( ) definie dans le code 4-7) : 



-MOTEUR AJAX- 
//instanciation de l'objet XMLHttpRequest 
var objetXHR = creationXHRO ; 
//Declaration de la fonction de rappel 
function traitementResultatO { 

if (objetXHR. readyState==4) {© 

var resultat = objetXHR. responseText ; 

//###Le resultat peut maintenant etre insere dans la page HTML 
//si le script serveur correspond a celui de 1'encadre, 
//la valeur de la variable "resultat" sera 
//alors egale a "Bonjour" 



// Traitement ASYNCHRONE 

//Designation de la fonction de rappel 

objetXHR. onreadystatechange = traitementResultat ; O 

//Configuration de la methode utilisee, du script serveur cible 

//et enfin activation du type asynchrone en dernier parametre 

ob jetXHR. open ( "get", "script. php", true) ; 

//envoi de la requete 

objetXHR. send(null); 

-FIN DU MOTEUR AJAX- 
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Ateliers pedagogiques sur les requetes asynchrones 

Le fonctionnement de la fonction de rappel et de la propriete readyState d'une requete asynchrone sera 
revu en detail dans les ateliers pedagogiques du chapitre 9. 



Ajout d'un traitement des erreurs HTTP du serveur 

Les scripts precedents fonctionnent tres bien tant qu'il n'y a pas de probleme lors du 
transfert HTTP. Imaginez maintenant que le script serveur soit supprime ou deplace. 
Dans ce cas les scripts ne fonctionneront plus et rien n'indiquera la nature du probleme. Pour- 
tant le serveur dispose d'une variable qui indique les erreurs HTTP, il s'agit bien sur du code 
de statut (revoir tableau 4-1). De meme, l'objet XMLHttpRequest possede une propriete 
status qui permet de lire facilement cette information. Nous allons done modifier le script de 
la fonction de rappel pour y ajouter un second test afin de s'assurer que tout s'est bien 
passe avant d'exploiter le resultat (dans ce cas la propriete status doit etre egale a 200). 
Dans le cas contraire, nous affichons un message d'erreur afin d'en informer les utilisateurs. 

Code 4-11 : Exemple d'une requete asynchrone avec traitement des eventuelles erreurs 
HTTP (ce code necessite la declaration prealable de la fonction creationXHRO definie 
dans le code 4-7) : 



-MOTEUR AJAX- 
//instanciation de l'objet XMLHttpRequest 
var objetXHR = creationXHRO: 
//Declaration de la fonction de rappel 
function traitementResultat( ) { 
if(objetXHR.readyState==4) { 
if(objetXHR.status==200) { 
var resultat = objetXHR. responseText ; 

//###Le resultat peut maintenant etre insere dans la page HTML 

//si le script serveur correspond a celui de l'encadre, 

//la valeur de la variable "resultat" sera 

//alors egale a "Bonjour" 

}else ( 

alertC'Erreur HTTP N""+ objetXHR. status) ; 

} 
} 
} 

// Traitement ASYNCHRONE 

//Designation de la fonction de rappel 

objetXHR. onreadystatechange = traitementResultat ; 

//Configuration de la methode utilisee, du script serveur cible 

//et enfin activation du type asynchrone en dernier parametre 

ob jetXHR. open ( "get", "script.php", true); 

//envoi de la requete 

objetXHR. send(null); 

-FIN DU MOTEUR AJAX- 



Envoi d'une requete asynchrone avec un parametre GET 

En general les requetes Ajax sont accompagnees de parametres afin d'indiquer au script 
serveur les donnees a retourner. La maniere la plus simple d'envoyer un parametre est 
d'utiliser la methode GET et d'ajouter un parametre d'URL a la suite de l'adresse du script 
cible comme par exemple : scriptAvecParametre.php?id=2 (pour l'utilisation de ce para- 
metre cote serveur, voir code 4-12). 
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Ce precede a aussi l'avantage de favoriser la mise au point du script serveur, puisqu'il 
suffit de l'appeler individuellement dans le navigateur en ajoutant le parametre d'URL 
manuellement a la suite de son nom (pour cela, saisir son URL complete dans la barre 
d'adresse du navigateur comme par exemple http: //local host/scri ptAvecParame- 
tre.php?id=2). Le script ainsi appele avec ce parametre doit afficher a l'ecran les memes 
donnees qu'il renverra ensuite a l'objet XMLHttpRequest lorsque le systeme sera opera- 
tionnel (soit dans notre exemple « Bonjour Monsieur Dupond »). Cette technique vous 
permet de verifier que le script serveur fonctionne correctement et d'aiguiller eventuel- 
lement vos recherches vers le programme JavaScript cote client si le probleme subsiste. 

Cote serveur, le parametre (?id=2 par exemple) est recupere par le biais de la variable 
$_REQUEST[ 'id'] avant d'etre exploite dans le programme de construction du resultat (voir 
code 4-12). Celui-ci sera ensuite affiche a l'ecran pour etre recupere en differe dans la 
propriete responseText de la fonction de rappel du moteur Ajax cote client (voir la fonction 
traitementResultatO code 4-13). 



Reponse HTTP du serveur a un parametre de la requete 

Pour les moteurs Ajax incluant un parametre dans I'envoi de la requete, nous avons legerement modifie le 
script serveur de sorte qu'il envoie le message d'accueil correspondant au numero de I'identifiant de I'utili- 
sateur concerne. 
Code 4-12 : Exemple de code PHPdufichier scriptAvecParametre.php : 

<?php 

//indique que le type de la reponse renvoyee au client sera du texte 

header ("Content -Type: text/plain") ; 

//recuperation de la variable GET 

if(isset($_REQUEST['id'])) $id=$_REQUEST['id']; else $id=0; 

//affectation du nom correspondant a I'identifiant 

if($id==l) $nom="Dumoulin" ; 

elseif ($id==2) $nom="Dupond"; 

elseif ($id==3) $nom="Marchand" ; 

else $nom="Inconnu" ; 

//mise en forme et renvoi de la reponse au client 

echo "Bonjour Monsieur ".$nom; 

?> 

Dans ce contexte, la reponse HTTP du serveur pourrait ressembler a I'exemple ci-dessous si le parametre 
de la requete est id=2. 

HTTP/1.1 200 OK 

Cache-Control: private 

Content-type: text/plain 

Server: GWS/2.1 

Date:Tue, 15 Jun 2007 13:20:24 GMT 

Bonjour Monsieur Dupond 



Code 4-13 : Exemple d'une requete asynchrone accompagnee d'un parametre transmis 
avec la methode GET (ce code necessite la declaration prealable de la fonction creation- 
XHR( ) definie dans le code 4-7) : 



-MOTEUR AJAX- 
//instanciation de l'objet XMLHttpRequest 
var objetXHR = creationXHR( ); 
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//Declaration de la fonction de rappel 
function traitementResultat( ) { 
if(objetXHR.readyState==4) { 

if(objetXHR.status==200) { 

var resultat = objetXHR.responseText ; 

//##Le resultat peut maintenant etre insere dans la page HTML 

//si le script serveur correspond a celui de l'encadre, 

//la valeur de la variable "resultat" sera 

//alors egale a " Bonjour Monsieur Dupond " 

}else { 

alertCErreur HTTP N""+ objetXHR. status) ; 

} 
} 
} 

// Traitement ASYNCHRONE - GET 

//Designation de la fonction de rappel 

objetXHR. onreadystatechange = traitementResultat ; 

//Configuration de la methode utilisee, du script serveur avec 

//les parametres a transmettre au serveur 

//et enfin activation du type asynchrone en dernier parametre 

var numero=2; //simulation du choix d'un numero d'identifiant 

objetXHR. open ( "get", "scriptAvecParametre.php?id="+numero, true) ; 

//envoi de la requete 

objetXHR. send(null); 

-FIN DU MOTEUR AJAX- 



Envoi d'une requete asynchrone avec un parametre POST 

Une autre alternative pour envoyer un parametre au serveur consiste a configurer la 
requete avec la methode POST. Cette technique est en general utilisee quand les donnees 
des parametres sont importantes (superieure a 512 octets) ce qui est assez rare en prati- 
que. D' autre part, cette methode est moins facile a mettre en oeuvre car si vous desirez 
verifier le bon fonctionnement du script PHP seul, il faut alors creer un formulaire POST 
pour simuler l'envoi de la requete Ajax. 

A noter cependant que si vous desirez envoyer vos parametres au serveur en XML et non 
au format texte sous forme de couple variable/valeur, il faudra dans cas utiliser la methode 
POST pour mettre en oeuvre votre application. 

Le fonctionnement est neanmoins semblable (voir code 4-14) hormis le fait que le para- 
metre est passe en argument de la methode send( ) (comme par exemple : send(id=2)) et 
non plus a la suite de l'URL du fichier serveur dans le second parametre de la methode 
open( ) (pour memoire : scriptAvecParametre.php?id=2). En methode POST, il faut indiquer 
le type des donnees envoyees par le biais de la methode setRequestHeader qui affectera le 
type correspondant a l'en-tete Content-Type avant d'envoyer la requete (voir code 4-14). 
En effet, quand un formulaire traditionnel dans un navigateur envoie des donnees en 
methode POST, le navigateur se charge d'affecter automatiquement la valeur appl i cation/ 
x-www-form-url encoded a l'en-tete Content-Type de la requete. Dans le cas d'une requete 
Ajax, il faut realiser manuellement cette affectation, car lorsque les donnees POST arrive - 
ront sur le serveur, PHP recherchera leur type d'encodage dans cet en-tete arm de les 
analyser correctement. 

Cote serveur il n'y a pas de difference (le fichier serveur sera done celui du code 4-12) car 
pour la recuperation du parametre nous avons utilise la variable HTTP $_REQUEST[ 'id'] qui 



Introduction a Ajax 



Partie I 



permet de recuperer des variables envoyees par un client quelle que soit leur methode 
(contrairement a $_GET[ 'id'] et $_P0ST[ 'id'] qui sont dedies a chacune des mefhodes). 

Code 4-14 : Exemple d'une requete asynchrone accompagnee d'un parametre transmis 
avec la methode POST (ce code necessite la declaration prealable de la fonction creation- 
XHR( ) definie dans le code 4-7) : 



-MOTEUR AJAX- 
//instanciation de l'objet XMLHttpRequest 
var objetXHR = creationXHRO; 
//Declaration de la fonction de rappel 
function traitementResultatt ) { 
if (objetXHR. readyState==4) { 
if(objetXHR.status==200) { 
var resultat = objetXHR. responseText ; 

//Le resultat peut maintenant etre insere dans la page HTML 

//si le script serveur correspond a celui de l'encadre, 

//la valeur de la variable "resultat" sera 

//alors egale a " Bonjour Monsieur Dupond " 

}else { 

alertCErreur HTTP N'"+ objetXHR. status) ; 

} 
} 
} 

// Traitement ASYNCHRONE - POST 

//Designation de la fonction de rappel 

objetXHR. onreadystatechange = traitementResultat ; 

//Configuration de la methode utilisee, du script serveur cible 

//et enfin activation du type asynchrone en dernier parametre 

ob j etXHR. open ( "post", "scriptAvecParamet re. php", true) ; 

//Affectation du type d'encodage de la requete envoyee 

objetXHR. setRequestHeadert "Content-Type", "application/x-www-form-url encoded") 

//simulation du choix d'un numero d'identifiant 

var numero=2; 

//envoi de la requete avec un parametre 

objetXHR. send(id=numero) ; 

-FIN DU MOTEUR AJAX- 



Recuperation du resultat de la requete avec responseText 
ou responseXML 

Pour recuperer le resultat renvoye par le serveur, nous avons utilise jusqu'a present (dans 
la fonction de rappel traitementResultat ()) la propriete responseText de l'objet 
XMLHttpRequest (voir code 4-15) si la reponse est au format texte. 

Code 4-15 : Recuperation de la reponse du serveur dans une variable res ul tat. 

var resultat = objetXHR. responseText : 

Par la suite nous verrons qu'il est aussi possible de recuperer des resultats plus complexes au 
format XML. Dans ce cas, il faudra utiliser la propriete responseXML du meme objet. 

Rappelons enfin que le resultat du serveur n'est disponible dans les proprietes response- 
Text ou responseXML que lorsque le cycle de transfert HTTP est termine et que l'etat de la 
propriete readyState est egal a 4 (Completed). C'est d'ailleurs pour cette raison que nous 
avons ajoute le test du code 4-16 dans la fonction de rappel car celle-ci est appelee a 
chacune des 4 modifications de la propriete readyState d'un cycle de transfert HTTP et 
nous desirons recuperer la reponse du serveur uniquement au terme de ce cycle. 
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Code 4-16 : Test de l'etat de la propriete readyState 

// — Fonction de rappel 
function traitementResultat( ) { 
if (objetXHR. readyState==4) { 
if(objetXHR.status==200) { 
var resultat = objetXHR.responseText ; 
} 
} 
} 



Utilisation de innerHTML pour afficher le resultat de la requite 

Dans les scripts precedents, nous avons recupere la reponse du serveur dans une variable 
resultat (voir code 4-15). Si nous desirons maintenant l'afficher dans la page, la methode 
la plus simple consiste a utiliser l'attribut innerHTML. Cet attribut permet de remplacer le 
contenu d'un element par une chaine de caracteres qui lui est affectee. 

Pour cela, il faut commencer par cibler un element de la page (<span id="message"> par 
exemple, voir code 4-17) en se referant a son identiflant a l'aide de la methode getEl e- 
mentByldt ) puis exploiter son attribut innerHTML comme dans l'exemple ci-dessous : 

document. getEl ementByldC'monMessage"). innerHTML 

On pourra ainsi remplacer son contenu par la reponse du serveur en lui affectant la propriete 
responseText de l'objet XMLHttpRequest (voir code 4-17). Ainsi, la reponse du serveur 
(« Bonjour » par exemple) s'affichera dans la balise span correspondante. 

Code 4-17 : Affichage du resultat dans une balise <span> de la page (code partiel) : 

<script language="JavaScript"> 
#########-M0TEUR AJ AX -######### 
//instanciation de l'objet XMLHttpRequest 
var objetXHR = creationXHRO ; 
//Declaration de la fonction de rappel 
function traitementResultat( ) { 
if(objetXHR.readyState==4) { 

if(objetXHR.status==200) { 

document. getEl ementByldC'monMessage") . innerHTML=objetXHR. responseText ; 

} 
} 
} 

// Traitement ASYNCHRONE - GET 

//Designation de la fonction de rappel 

objetXHR. onreadystatechange = traitementResultat ; 

//Configuration de l'objet XHR 

objetXHR. open ( "get" , "scri pt . php" .true) ; 

//envoi de la requete 

objetXHR. send(null); 

#»######- FIN DU MOTEUR AJAX- 

</script> 

//avant 1 'affectation : 

<span id="message"X/span> 

//apres 1 'affectation : 

<span id="message"> Bonjour </span> 
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A noter cependant que la propriete innerHTML n'est pas normalised par le W3Cw et qu'il 
est preferable d'utiliser les methodes du DOM meme si celles-ci sont plus complexes a 
mettre en oeuvre (ces methodes seront presentees par la suite dans cet ouvrage). 



Utilisation d'un gestionnaire d'evenement pour declencher I'envoi 
de la requete 

Pour que le moteur Ajax s'execute, il faut declencher son appel dans la page HTML de 
1' application. Pour illustrer cela, nous vous proposons de mettre en place un gestionnaire 
d'evenement tres simple qui appellera une fonction contenant le moteur Ajax. Dans notre 
exemple, nous utiliserons le gestionnaire d'evenement onkeypress afin que la fonction affi- 
cheMessage( ) (regroupant le moteur Ajax) soit invoquee des que l'utilisateur appuiera sur 
une touche quelconque du clavier. Evidemment dans vos futures applications, vous pourrez 
declencher de la meme maniere 1' appel du moteur Ajax avec l'un des nombreux gestion- 
naires d'evenements que JavaScript met a votre disposition (voir les ressources sur le DOM a 
la fin de cet ouvrage pour plus d'information au sujet des gestionnaires d'evenements). 

Code 4-18 : Declenchement du moteur Ajax a l'aide du gestionnaire d'evenement 

onkeypress : 

<script language="JavaScript"> 

// Gestionnaire d'evenement 

window. onkeypress = afficheMessage; 
########-M0TEUR AJAX -######### 
//Declaration de 1'objet 
var objetXHR; 

//Declaration de la fonction de rappel 
function traitementResultatO { 
if (objetXHR. readyState==4) { 

if(objetXHR.status==200) { 

document. getElementBy Id ("monMessage") .innerHTML=objetXHR.responseText ; 

} 
} 
} 

//Declaration de la fonction d'appel du moteur Ajax 
function afficheMessageO { 

//Instanciation de 1'objet XMLHttpRequest 

objetXHR = creationXHRO; 

//Designation de la fonction de rappel 

objetXHR. onreadystatechange = traitementResultat ; 

//Configuration de 1'objet XHR 

ob jetXHR. open ( "get", "script. php", true) : 

//Envoi de la requete 

objetXHR.send(null); 



} 



FIN DU MOTEUR AJAX- 



</script> 



//avant qu'une touche ne soit actionnee 
<span id="message"X/span> 
//apres qu'une touche a ete actionnee : 
<span id="message"> Bonjour </span> 



Partie II 



Environnement 
de developpement 



Pour developper des applications AJAX-PHP, vous devez disposer d'un serveur 
devaluation PHP-MySQL, d'un editeur de code polyvalent (pour ecrire des pages 
HTML ainsi que des programmes PHP et JavaScript) et d'un navigateur (qui sera aussi 
utilise pour deboguer les scripts). La presente partie a pour but de vous accompagner 
dans la mise en ceuvre de cet environnement de developpement afin de vous permettre 
de realiser rapidement vos premieres applications. 
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Firefox, navigateur 
et debogueur a la fois 



Pour tester le bon fonctionnement des applications Ajax, nous utiliserons bien stir un 
navigateur mais ce dernier servira aussi d'outil de debogage. Pour cela, il convient 
d' installer des extensions ad hoc que nous allons detailler dans ce chapitre. 

Le navigateur Firefox 

Meme si Internet Explorer reste encore le navigateur le plus utilise actuellement, nous 
utiliserons Firefox pour tester nos applications dans le cadre de cet ouvrage. 

En effet, Firefox a de nombreux avantages par rapport a son concurrent : moins vulnerable 
et plus conforme aux standards, il dispose aussi de nombreuses extensions qui en font 
aujourd'hui l'outil indispensable au developpement Web. Parmi toutes ses extensions, 
deux d'entre elles nous interessent particulierement : 

• La premiere est 1' extension « firebug », elle permet de transformer votre navigateur en 
outil de debogage. Nous pourrons ainsi analyser le fonctionnement d'une application et 
facilement localiser les eventuelles erreurs qui pourront se glisser dans votre programme 
JavaScript en controlant son deroulement. 

• La seconde extension se nomme « IE Tab », elle permet d'activer un emulateur du 
navigateur Internet Explorer tout en continuant d'utiliser Firefox. En effet les princi- 
paux problemes dans la realisation de scripts client sont souvent lies a des incompa- 
tibilites entre navigateurs, aussi, avec cette extension, il sera tres pratique de passer de 
l'un a 1' autre d'un simple clic lors de la phase de test. 

Installation de Firefox 

Mise a jour de Firefox 2.0 

Si vous avez deja une version de Firefox installee sur votre ordinateur il vous est recom- 
mande de desinstaller l'ancienne version et de proceder a une installation complete de 
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Firefox 2.0 car 1' installer par dessus une version existante peut quelquefois causer des 
problemes imprevisibles. Pour desinstaller votre ancienne version il faut utiliser la rubri- 
que ajout/suppression de programmes de Windows, avant de commencer a installer la 
nouvelle version (voir procedure ci-apres). Les parametres, preferences et autres marque- 
pages seront conserves dans la nouvelle version car ils sont sauvegardes directement 
dans votre profil utilisateur. 

Premiere installation 

Si vous n'avez pas encore eu le plaisir d'utiliser Firefox, commencez par telecharger 
l'installateur depuis le site de Mozilla : 

http://www.mozilla-europe.org/fr/products/firefox/ 

Une fois telecharge sur votre ordinateur, cliquez sur l'installateur et laissez-vous guider. 
Le premier ecran vous invite a fermer toutes vos applications afin d'eviter d'eventuels 
conflits de donnees communes. Le second ecran vous invite a preciser si vous desirez 
importer des parametres, favoris et autres reglages depuis un autre logiciel deja installe 
sur votre ordinateur. Vous pourrez ainsi importer de nombreux parametres depuis Internet 
Explorer mais aussi depuis Netscape, Opera ou encore Mozilla selon le navigateur 
present sur votre ordinateur au moment de 1' installation. 

Une fois l'installation terminee, un dernier ecran vous demande de l'autoriser a mettre a 
jour automatiquement les differents modules de Firefox. Nous vous conseillons de laisser 
cette case cochee, arm de disposer au plus vite de la toute derniere version du navigateur. 

Utilisation de Firefox 

Firefox regorge de fonctionnalites tres interessantes, mais il serait bien trap long de 
toutes les detailler dans cet ouvrage. Nous nous contenterons simplement d'indiquer 
quelques procedures indispensables a connaitre pour pouvoir exploiter au mieux Firefox 
dans le cadre de la mise au point de pages Web. 

Les onglets 

Precurseur par rapport a son concurrent, Firefox a integre depuis le debut l'affichage des 
pages dans des onglets differents. Les developpeurs ayant souvent de nombreuses pages 
a consulter en me me temps apprecieront d'utliser ce systeme d' onglets plutot que d' avoir 
a jongler avec de multiples fenetres. 

L'ouverture d'un nouvel onglet peut etre effectuee depuis le menu (fichier puis nouvel 
onglet) et cette fonctionnalite sera encore plus efficace si vous utilisez le raccourci 
clavier en rapport : Ctrl + T. Une autre alternative pour ouvrir un nouvel onglet consiste 
a appuyer sur la touche Ctrl en meme temps qu'un clic sur un lien hypertexte d'une page. 
La page cible s'ouvrira alors dans un nouvel onglet et ne remplacera pas la page en cours 
(si vous appuyez sur la touche Maj au lieu de la touche Ctrl, la page s'ouvrira cette fois 
dans une nouvelle fenetre Firefox). 

A noter que dans cette nouvelle version 2.0, vous pouvez maintenant (sans extension 
supplementaire a installer) ranger vos onglets dans l'ordre qui vous convient par un 
simple glisser-deposer de souris. Lorsque vous etre en train de deplacer un onglet avec 
votre souris, une petite fleche indique alors a quel endroit il va etre insere si vous relachez 
le bouton de la souris. 
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Les marque-pages 

Les marque -pages (appeles aussi « favoris » dans Internet Explorer) regroupent les diffe- 
rentes adresses memorisees lors de vos consultations de pages Web. Pour enregistrer une 
nouvelle adresse avec Firefox, il suffit de selectionner depuis le menu Marque - 
pages>Marquer cette page (ou d'utiliser le raccourci clavier Ctrl + D) puis de choisir le 
dossier dans lequel vous desirez memoriser le signet. Si vous desirez que le signet appa- 
raisse dans la barre d'outils, il faudra le placer dans le repertoire Barre personnelle. 
Enfin, sachez qu'il est possible d'afficher les marque -pages dans le panneau lateral avec 
le raccourci clavier Ctrl + B. 

Gestion du cache 

Vous pouvez modifier la taille du cache : il s'agit de l'espace de stockage sur votre machine 
des elements deja consultes, pour un chargement plus rapide. La plupart des utilisations 
necessitent entre 50 et 100 Mo de memoire cache. Attention a ne pas trop augmenter 
cette valeur, c'est la plupart du temps inutile. Pour modifier la taille du cache depuis le 
menu de Firefox, allez dans le menu Outils>Option puis cliquez sur Avance et choisissez 
l'onglet Reseau. Puis dans cette fenetre, vous trouverez un champ qui vous permettra de 
modifier la taille du cache. De meme, si vous desirez vider le cache, vous pouvez aussi 
cliquer sur le bouton Nettoyer maintenant situe a droite du champ de cette meme fenetre. 



Extensions Firebug et IE Tab 

L' extension Firebug permet de disposer d'outils de suivi du code JavaScript, CSS et 
DOM d'une page parcourue par Firefox. Cette extension permet aussi d'acceder aux 
donnees XML ainsi qu'aux requetes XMLHttpRequest ce qui va se reveler fort pratique 
dans la cadre du debogage d'une application Ajax. 

Voici un apercu de ses principales fonctionnalites : 

• Debogage JavaScript grace a ses fonctions de suivi de programme et de gestion de 
points d' arrets qui permettent d'avancer pas a pas pour developper et mettre au point 
ses scripts tres rapidement. 

• Analyse des acces reseau tres interessant pour connaitre les donnees echangees et les 
temps de reponse des requetes HTTP propres a Ajax. 

• Inspection d'un element HTML, XML ou CSS de la page par simple survol avec possi- 
bility de modifier son code a la volee. 

• Exploration par le clavier ou la souris des elements les plus recules du DOM. 

L'extension IE Tab permet d'emuler le fonctionnement du navigateur Internet Explorer 
directement dans Firefox. Pour basculer d'un navigateur a l'autre, il suffit de cliquer sur 
le bouton situe en bas a droite de l'ecran. 



Installation des extensions 

Pour installer une nouvelle extension Firefox, vous pouvez vous rendre directement sur 
la page Web du site officiel de Mozilla : 

https://addons. mozilla. org/firefox/ 
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Une autre alternative consiste a allez dans le menu Outils>Modules complementaires. La 
fenetre de gestion des modules complementaires doit alors s'ouvrir (voir figure 5-1). 
Cliquez ensuite en bas a droite de cette fenetre sur le lien Obtenir des extensions pour 
afficher la page des extensions de Firefox. 
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Figure 5-1 

Acces a la fenetre de gestion des extensions Firefox 



Une fois dans la page des extensions, saisissez le nom de l'extension recherchee dans le 
champ prevu a cet effet place en haut et a droite de l'ecran. Cliquez ensuite sur le bouton 
Hop ! pour lancer la recherche. 

Apres avoir localise la page correspondante a l'extension Firebug, cliquez sur le bouton 
de telechargement Installer puis sur le bouton Installer maintenant de la fenetre d' instal- 
lation du logiciel. 

Une fois 1' installation effectuee, l'extension vient alors se placer dans la fenetre des 
modules complementaires dans la rubrique Installation. Un bouton place en bas de cette 
fenetre vous invite alors a redemarrer Firefox pour que l'extension soit complete ment 
operationnelle. Dans notre cas, comme nous desirons installer une autre extension, nous 
allons differer ce redemarrage apres 1' installation de la seconde extension. 
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Retoumons done sur la page d'accueil des extensions Firefox pour lancer une seconde 
recherche en saisissant cette fois le nom de 1' extension IE Tab. 

La procedure sera la meme que pour l'extension precedente, cliquez sur les boutons de 
telechargement pour installer la seconde extension sur l'ordinateur et pour qu'elle soit 
visible dans la fenetre des modules complementaires. 

Cette fois, nous pouvons cliquez sur le bouton de redemarrage en bas de la fenetre du 
module complementaire afin d' installer completement les deux extensions dans Firefox 
(voir figure 5-2). 
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Figure 5-2 

Fenetre de gestion des extensions Firefox apres 1'ajout des deux modules complementaires. 

Lorsque Firefox s'ouvre de nouveau, il dispose alors des fonctionnalites de ses nouvelles 
extensions. Vous pouvez vous en assurer en deroulant le menu Outils, par la presence de 
deux nouvelles options correspondantes aux extensions precedemment installees (voir 
reperes 1 et 2 de la figure 5-3). 

De meme deux nouveaux boutons sont venus prendre place en bas a droite de l'ecran du 
navigateur (voir figure 5-3). Le premier bouton permettra d'ouvrir Firebug et le second 
de basculer de Firefox a l'emulateur de IE (voir repere 3 de la figure 5-3). 



Utilisation des extensions 

Pour I'utilisation des extensions Firebug et IE Tab, nous vous invitons a vous referer aux chapitres de la 
partie 3 dans lesquels nous illusions par des cas pratiques comment exploiter leurs differentes fonction- 
nalites. 
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Figure 5-3 

Menu et boutons de controle de Firebug et de IE Tab 
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Wamp5, une infrastructure 

serveur complete 

Choix de I' infrastructure serveur 

Contrairement a une simple page HTML (meme si elle contient du code JavaScript tradi- 
tionnel), une page Ajax devra en general communiquer avec des scripts serveur (PHP, par 
exemple). Cette page pourra eventuellement avoir des acces a une base de donnees 
(MySQL, par exemple). Or, l'utilisation de ces technologies necessite une infrastructure 
serveur adequate car plusieurs applications sont necessaires a leur fonctionnement cote 
serveur : 

• un serveur Web (le serveur Apache est le plus frequemment utilise) ; 

• un langage de script serveur installe sur le serveur Web (dans cet ouvrage, nous utili- 
serons PHP) ; 

• un serveur de base de donnees (dans cet ouvrage, nous utiliserons MySQL). 

Selon les ressources materielles dont vous disposez, plusieurs solutions peuvent etre 
exploiters. 

La premiere solution concerne les developpeurs qui disposent d'une connexion perma- 
nente et rapide a Internet ainsi qu'un serveur Web distant equipe d'une base de donnees 
MySQL et d'un moteur de scripts PHP. 

La deuxieme solution est la plus exigeante. Elle concerne surtout les societes de develop- 
pement Internet qui ont a leur disposition un serveur Web en local, avec PHP et MySQL, 
en plus de leur serveur distant de production. 

La troisieme solution est accessible a tous, puisqu'il suffit d'installer sur son poste de 
developpement une infrastructure serveur avec PHP et MySQL qui recree en local le 
meme comportement que le serveur Web distant. 

Nous avons retenu la troisieme solution pour realiser nos demonstrations car elle pourra 
etre utilisee par tous les lecteurs de cet ouvrage. Cependant, les concepts developpes sont 
identiques quelle que soit la methode retenue. 
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Aiin de vous accompagner dans la mise en oeuvre de votre plate-forme de develop- 
pement, le paragraphe suivant sera consacre a 1' installation d'une infrastructure serveur 
locale. 



Les protocoles Internet 

Internet permet de relier de nombreux ordinateurs distants par un support physique. Cependant, pour que 
ces derniers puissent dialoguer, ils doivent utiliser un meme protocole. Le protocole pour le Web d'lnternet 
est le HTTP qui permet aux internautes de consulter (ou d'evaluer dans notre cas) des pages Web a I'aide 
de leur navigateur. II existe egalement d'autres protocoles dedies a des medias specifiques ou permettant 
d'acceder a des services en ligne. Ainsi, les protocoles SMTP et POP3 permettent de gerer les e-mails et 
le protocole FTP permet le transfert (ou la publication dans notre cas) de fichiers d'un ordinateur a I'autre. 



Mise en oeuvre d'une infrastructure serveur 
Procedure d'installation de la suite Wamp5 

Pour telecharger gratuitement la derniere version de Wamp5, consultez le site 
www.wampserver.com. Cliquez sur le lien Downloads, puis remplissez le formulaire d'infor- 
mations (voir figure 6-1). Vous serez ensuite redirige vers la page du site Sourceforge.net 
dediee a Wamp5 ou vous pourrez telecharger le fichier executable sur votre ordinateur. 

http://www. wampserver. com 
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Figure 6-1 

Installation de Wamp5 : cliquez sur le lien Downloads et completez le formulaire d' information. 
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Une fois le fichier enregistre sur votre ordinateur, lancez 1' installation en double -cliquant 
sur l'installeur. Une premiere fenetre apparait, vous recommandant de fermer toutes les 
applications actives avant de lancer 1' installation. Cliquez ensuite sur Next pour faire 
apparaitre les conditions d'utilisation (licence) qu'il faut valider. Dans l'ecran suivant, 
vous pouvez choisir le repertoire dans lequel vous allez installer le logiciel. Nous vous 
suggerons de valider l'option par defaut (C:\wamp). Dans l'ecran qui suit, choisissez le 
dossier de programme dans lequel le logiciel apparaitra (nous vous recommandons de 
choisir celui suggere par Wamp5, soit WampServer). L'ecran suivant, recapitule les options 
choisies et vous invite a lancer 1' installation en cliquant sur le bouton Install. 

L' installation demarre et un indicateur afhche l'etat d'avancement de la tache. Vous aurez 
ensuite a choisir le repertoire dans lequel seront stockes les fichiers PHP (conserver 
l'option par defaut : www). Vous devez egalement renseigner un certain nombre d' informa- 
tions concernant votre messagerie, a savoir le SMTP (prendre le serveur de messagerie 
sortant de votre fournisseur d'acces Internet : smtp.wanadoo.fr, par exemple) et votre e- 
mail par defaut. Une fenetre s'affiche alors pour vous informer que Fire fox a ete detecte 
sur votre ordinateur et vous invite a le choisir comme navigateur par defaut. Validez cette 
option, afin de vous permettre d'utiliser Firefox et ses extensions precedemment instal- 
lees (Firebug et IE Tab) pour mettre au point vos pages dynamiques. Enfin, un dernier 
ecran indique que 1' installation de Wamp5 s'est correctement deroulee et vous propose 
de demarrer le logiciel des maintenant (case precochee). 

Apres validation du dernier ecran, Wamp5 demarre automatiquement et une icone appa- 
rait dans la barre des taches de votre ordinateur. II existe trois etats possibles de cette 
icone : si elle est completement blanche, cela signifie que les deux serveurs (le serveur 
Apache et MySQL) sont en etat de marche ; si les deux premiers tiers du demi-cercle 
sont jaune, cela signifie qu'au moins un des deux serveurs est arrete (ou pas encore 
demarre) ; enfin, si le premier tiers du demi-cercle est rouge, cela signifie que les deux 
serveurs sont a 1' arret. 

Arret et demarrage de Wamp5 

Avant d'utiliser Wamp5, il est utile de rappeler la procedure de gestion des serveurs et du 
logiciel pour vos futures utilisations. Pour commencer, je vous invite a arreter les 
serveurs de Wamp5. Pour cela, cliquez sur 1' icone de Wamp5, puis dans le menu contex- 
tuel qui s'affiche (par la suite nous appellerons ce menu contextuel, le manager de 
Wamp5), cliquez ensuite sur Stop Al 1 Servi ces (voir figure 6-2). L icone doit alors chan- 
ger d'etat et apparaitre avec son premier tiers rouge. Pour redemarrer les serveurs de 
Wamp5, vous devez parcourir le manager de ce dernier et selectionnez l'option Start Al 1 
Services. A noter que si 1' icone de Wamp5 reste au jaune ou au rouge, cela indique que 
vos serveurs (ou l'un de vos serveurs) ne sont plus operationnels. II faudra alors 
acceder au manager et selectionner l'option Restart All Services pour reactiver le ou les 
serveurs de Wamp5. Nous venons de voir la procedure pour gerer 1' arret et le redemar- 
rage des serveurs de Wamp5. Cependant, si vous desirez completement arreter 1' applica- 
tion, il faut dans ce cas faire un clic droit sur la meme icone et selectionner Exit (1' icone 
doit alors disparaitre completement de la barre des taches). Pour relancer le logiciel 
Wamp5 il faut alors derouler le menu Tous les programmes du bouton Demarrer de 
Windows, puis le dossier WampServer et cliquer sur l'icone de start wampserver. La meme 
demarche devra d'ailleurs etre effectuee lors du demarrage de votre ordinateur pour 
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lancer Wamp5, sauf si vous avez coche la case de demarrage automatique dans la proce- 
dure d' installation que nous venons de detailler. 



Figure 6-2 

Utilisation de Wamp5 : 
des le demarrage 
du logiciel Wamp5, 
une icone apparait 
dans la barre des taches. 
Cliquez sur cette icone 
pour afficher le manager 
de Wamp5. 
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Decouverte du manager de WampS 

Le manager de Wamp5 vous permet d'acceder aux fonctions suivantes (les differentes 
options seront detaillees en partant du haut du manager, voir figure 6-2) : 

• Locahost - donne acces au Web local et permet de tester toutes les pages enregistrees 
sous la racine www (soit http://l ocal host/ qui correspond a la racine situee a l'empla- 
cement C : /wamp/www/). 

• PhpMy Admin — permet d'acceder au gestionnaire de base de donnees MySQL nomme 
phpMy Admin (soit 1' alias http : //l ocal host/phpmyadmi n/). 

• SQLiteMiniger — permet d'acceder au gestionnaire de base de donnees integre a PHP 
nomme SQLite (soit l'alias http ://l ocal host/sqlitemanager/). 

• www directory - donne acces a un explorateur Windows configure pour s'ouvrir auto- 
matiquement dans le repertoire racine www (C : \wamp\www\). 

• Log files — permet d' afficher les fichiers de log du serveur Apache (apache error log), 
du preprocesseur PHP (php error log) et du serveur MySQL (my sql error log). Ces 
fichiers de log pourront etre avantageusement consultes pour identifier un probleme 
dans l'une des applications citees. 

• Conf i g f i 1 es — ouvre les differents fichiers de configuration de la suite Wamp5 dans le 
Bloc -notes. Ces fichiers sont : httpd. conf pour la configuration d' Apache, php. i ni pour 
la configuration de PHP et my . i ni pour la configuration de MySQL. Vous pouvez ainsi 
consulter, voire modifier (a ne faire evidemment que si vous etes stir de vous...) les 
options de chaque fichier de configuration de la suite Wamp5. 

• PHP extensions — permet d'activer ou de desactiver une extension PHP. Les extensions 
de PHP sont des bibliotheques de fonctions dediees a un usage particulier qu'il faut 
activer sur le serveur avant de pouvoir les exploiter dans vos programmes PHP. 
Certaines de ces extensions sont activees par defaut (gestion des bases de donnees 
MySQL ou SQLite...) alors que d'autres doivent etre activees manuellement avant 
leur usage (gestion des fichiers PDF ou encore XSL. . .). Pour activer une extension, il 
suffit de double-cliquer sur 1' extension desiree dans la liste proposee par le manager. 
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Alias directories - permet de creer des repertoires alias pointant vers des ressources 
placees dans un emplacement different de la racine www (C:/wamp/www/ par defaut). 
Par exemple, si vous desirez creer un alias pointant sur des fichiers PHP places dans le 
repertoire D:/www/SITEdemo, il suffit de creer un alias /SITEdemo/ ainsi, si vous appelez 
l'URL http://localhost/SITEdemo/ dans votre navigateur, vous accederez aux fichiers 
situes dans le repertoire D:/www/SITEdemo et non ceux du repertoire C:/wamp/www/SITE- 
demo/ qui n'existe pas enrealite. 

Apache — donne acces a un sous-menu d' administration du serveur Apache. Vous 
pourrez ainsi arreter le serveur (Stop Service) et le redemarrer (Restart Service). Ce 
sous menu vous permet aussi de desinstaller puis d' installer un autre serveur Apache 
d'une version differente. 

MySQL — donne acces a un sous-menu d' administration du serveur MySQL. Vous 
pourrez ainsi arreter le serveur (Stop Service) et le redemarrer (Restart Service). Ce 
sous-menu vous permet aussi de desinstaller puis d' installer un autre serveur MySQL 
d'une version differente. 

Start All Service — permet de demarrer tous les services en meme temps (soient les 
deux serveurs, Apache et MySQL). 

Stop Al 1 Servi ce — permet d'arreter tous les services en meme temps (soient les deux 
serveurs, Apache et MySQL). 

Restart All Service — permet de redemarrer tous les services en meme temps (soient 
les deux serveurs, Apache et MySQL). 



D'une version a I'autre 

Selon la version de Wamp5 et de votre systeme d'exploitation, les ecrans et les procedures detaillees 
precedemment peuvent etre tres legerement differents. En guise de reference, nous avons utilise la 
version 1.7.2 de Wamp5 pour nos demonstrations. Si vous utilisez une version anterieure ou ulterieure, il 
est possible que le manager soit organise differemment. II n'en demeure pas moins que le fonctionnement 
de ces logiciels reste identique d'une version a I'autre et que vous n'aurez pas de difficulte a adapter les 
procedures detaillees dans cet ouvrage. 



Test du serveur local 

Pour tester le bon fonctionnement du serveur Web et du moteur PHP, nous allons 
commencer par creer un script PHP a l'aide d'un simple editeur de texte. Ouvrez le Bloc- 
notes de Windows a partir du menu Demarrer (Programmes>Accessoires>Bloc-notes) ou 
TextEdit si vous utilisez un Macintosh. Saisissez ensuite les trois lignes de code suivantes 
dans 1' editeur : 

|<?php 
echo "Bonjour, PHP fonctionne" ; 
?> 

Enregistrez ensuite ce fichier dans C:\wamp\www\SITEajax sous le nom bon jour, php, en 
prenant soin de selectionner le type Tous fichiers et en ajoutant au nom du fichier 
1' extension .php. Le repertoire SITEajax sera cree sous www lors de l'enregistrement de ce 
premier fichier. Ce meme repertoire sera utilise dans les chapitres suivants pour tester les 
exemples d' applications Ajax qui entreront en interactions avec des fichiers PHP, c'est 
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pourquoi nous vous conseillons d'utiliser les memes conventions de nommage. De retour 
dans le Bloc -notes, assurez-vous que le nom du fichier apparait bien dans la barre de titre 
de la fenetre puis fermez le Bloc -notes. 



Ne jamais supprimer le fichier index.php de la racine www 

La page Web local qui s'affiche quand vous accedez au localhost par le manager de Wamp5, n'est autre 
que le fichier 1 ndex . php qui se trouve a la racine www. Si vous tenez a conserver la page qui affiche les 
differents repertoires de vos sites, il faudra veiller a ne pas supprimer ce fichier. Enfin, cote organisation, 
nous vous conseillons de creer un repertoire different sur cette meme racine a chaque fois que vous ajou- 
terez un nouveau site sur votre serveur local. Ainsi, vous pourrez acceder a vos differents sites tres faci- 
lement depuis la page du Web local en cliquant sur le dossier correspondant dans la rubrique Vos projets. 



Ouvrez maintenant la page Web Local a partir du manager de Wamp5 (option 1 ocal host du 
manager, voir repere 1 de la figure 6-3). Le repertoire SITEajax doit alors apparaitre en 
bas de cette page, dans une rubrique nommee Vos projets. Cliquez sur le lien SITEajax 
(voir repere 2 de la figure 6-3) pour ouvrir une fenetre qui affiche la liste de tous les 
fichiers contenus dans ce repertoire : dans le cas present, nous retrouvons uniquement 
notre fichier bonjour.php (voir figure 6-3). 
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Figure 6-3 

La page Web local (option localhost du manager Wamp5) permet a" acceder au repertoire SITEajax, puis d' ouvrir 
le fichier bonjour.php dans le navigateur. 
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Si vous cliquez maintenant sur le fichier bonjour.php (voirrepere 3 de la figure 6-3), vous 
envoyez une requete au serveur Apache pour ouvrir le fichier dans le navigate ur. Si le 
serveur Web et le moteur PHP fonctionnent correctement, le message Bon jour, PHP fonc- 
tionne doit s'afficher dans le navigateur (voir figure 6-3). II est en outre interessant 
d'observer le code source envoye au navigateur en cliquant sur Source dans le menu Aff i - 
chage. On remarque que le code ne comporte plus les balises PHP ni l'instruction echo 
saisies lors de la creation du fichier, mais uniquement le message affiche dans le navigateur. 
En effet, lors de l'appel du fichier, celui-ci est d'abord execute par le moteur PHP du 
serveur Apache et c'est la page resultante en HTML qui est ensuite envoyee au navigateur 
pour son interpretation finale. 



Configuration du fichier php.ini 

Le fichier php.ini permet de configurer de nombreux parametres et options d'execution de PHP. Ce 
fichier est lu a chaque demarrage du serveur Apache, il suffit done de redemarrer le serveur Apache pour 
que les nouvelles options soient prises en compte. Pour vos premiers tests, nous vous conseillons de 
I'utiliser avec ses options par defaut mais, par la suite, vous pourrez facilement le modifier a I'aide du 
manager de Wamp5. Pour acceder a ce fichier, il suffit de cliquer sur I'option Conf i g f i 1 es du manager 
de Wamp5 puis de selectionner php.ini. Une fois ce fichier ouvert dans le Bloc-notes, vous decouvrirez 
un grand nombre de parametres accompagnes de nombreux commentaires qui vous guideront dans leur 
configuration. Parmi ces parametres, nous avons choisi de vous en presenter trois, dont il conviendra de 
verifier leur configuration : 

• magi c„quote _gpc : s'il est initialise avec la valeur On, ce parametre permet de prefixer automatique- 
ment par une barre oblique inverse (\) les apostrophes et les guillemets d'un texte envoye par un 
formulaire ou issu d'un cookie avant de I'enregistrer dans la base MySQL. II evite d'avoir a utiliser les 
fonctions addSl ashes () et stri pSl ashes ( ) a chaque insertion. Cependant, cette option est main- 
tenant deconseillee car elle necessite de mettre en place une gestion differente des donnees selon 
leur origine et entraine une legere baisse des performances du systeme. Vous pouvez cependant 
I'activer pour assurer la compatibilite avec d'anciens scripts. 

• register_globals : s'il est initialise avec la valeur On, ce parametre permet d'utiliser les variables 
globales (variables simples comme $varl) lors d'un passage d'une variable d'une page a I'autre (GET) 
ou d'une recuperation de valeur d'un champ de formulaire (GET ou POST). Cette option est configuree 
par defaut a Off depuis la version 4.2 de PHP, ce qui contraint a utiliser les tableaux des variables 
serveur ($_P0ST['varl'], $_GET['varl ']...). Vous pouvez configurer ce parametre a On si vous 
utilisez des anciens scripts et que vous ne souhaitez pas les modifier. Cependant, nous vous 
conseillons vivement de laisser sa valeur a Off si vous developpez de nouveaux scripts afin qu'ils 
soient exploitables quelle que soit la version du PHP. 

• error_reporting : cette option peut etre parametree selon le niveau de controle desire de vos 
scripts. Dans les dernieres versions de PHP, cette option est configuree par defaut avec la valeur 
E_ALL qui est le niveau maximal de controle. Avec ce parametrage, toutes variables non initialisees 
provoqueront automatiquement un warning (une alerte) (Undefined variable). Si vous desirez 
eviter ces frequents warning, vous pouvez remplacer la valeur actuelle par E_ALL & ~ E_N0TICE 
mais I'ideal est bien sur de programmer proprement et d'initialiser toutes les variables avant de les 
utiliser. 



Gestion des extensions PHP 
Extensions installees par defaut 

Les extensions PHP sont des bibliotheques de fonctions dediees a une utilisation specifi- 
que. II existe par exemple des extensions dediees a MySQL (php_mysql), a la gestion des 
images (php_gd2) ou encore aux fonctions XML (php_domxml). 
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Lorsque vous avez installe Wamp5, certaines extensions PHP ont ete installees par defaut 
et sont done immediatement disponibles (php_mysql par exemple) mais il est aussi tres 
simple d'en installer d'autres par le biais du manager de Wamp5. 

Installation d'une extension 

L' installation d'une extension sur Wamp5 est tres simple. Depuis le manager de Wamp5, 
selectionnez PHP settings (voir repere 2 de la figure 6-4) puis PHP extensions (voir 
repere 3 de la figure 6-4) et recherchez 1' extension a installer dans la liste (voir repere 4 
de la figure 6-4). Si le nom de l'extension n'est pas precede d'une petite fleche, cela 
signifie que l'extension n'est pas encore installee. Cliquez alors sur le nom de l'extension 
pour l'activer. Redemarrez ensuite Wamp5 en cliquant sur Restart All services depuis le 
manager. Vous pouvez ensuite reafficher cette liste d'extension afin de vous assurer que 
l'extension qui vient d'etre installee est maintenant precedee d'une petite fleche. 

Si vous etes sur un serveur distant, sachez qu'il est possible de verifier la presence d'une 
extension en affichant un fichier phpi nf o . php (fichier contenant une fonction phpi nf o ( )) et 
en recherchant l'entree correspondant a l'extension dans les tableaux de cette page. A 
noter que sur Wamp5, un fichier phpi nf o est directement disponible depuis la page 1 ocal - 
host accessible depuis l'entree du meme nom dans le manager. 




Figure 6-4 

Pour installer une extension, affichez la liste des extensions a partir de l'entree PHP extension du manager, 
puis cliquez sur I 'extension a installer. 
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Gestionnaire phpMyAdmin 

La suite Wamp5 comprend egalement une base de donnees MySQL et son gestionnaire 
phpMyAdmin. Pour acceder au gestionnaire phpMyAdmin et administer la base de 
donnees, il faut cliquer sur l'entree de meme nom dans le menu du manager (voir 
figure 6-5). 
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Figure 6-5 

Pour acceder au gestionnaire de la base de donnees MySQL, ilfaut cliquer sur I 'entree phpMyAdmin du menu 
du manager de Wamp5. 



Linterface du gestionnaire phpMyAdmin s'afhche alors dans le navigateur (voir figure 6-5). 
Les differentes fonctionnalites de ce gestionnaire seront presentees en detail dans le 
chapitre 22 dedie a MySQL a la fin de cet ouvrage et dans les ateliers du chapitre 13. 
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Dreamweaver, 
un editeur polyvalent 

Pourquoi utiliser Dreamweaver ? 

Dans le chapitre consacre a l'environnement serveur, vous avez cree un petit script pour 
tester le fonctionnement du serveur (revoir le fichier bonjour.php dans le chapitre 6). Pour 
creer ce premier fichier PHP, vous avez utilise le bloc-notes de votre PC (ou TextEdit si 
vous avez un Macintosh). Par la suite, nous allons devoir creer des pages HTML, mais 
surtout de nombreux programmes PHP ou JavaScript. Meme s'il est possible de creer tous 
vos scripts avec un simple bloc-notes, il est tres interessant d' utiliser un editeur plus evolue 
et surtout mieux adapte a la creation de scripts PHP ou JavaScript (avec des fonctions de 
coloration syntaxique ou des assistants a la saisie de code par exemple). 

II existe de nombreux editeurs polyvalents qui pourraient vous assister dans la creation de 
pages HTML et dans la redaction de programmes PHP et JavaScript, mais nous avons 
choisi l'editeur Dreamweaver car c'est l'editeur Web le plus utilise actuellement et que 
vous etes deja tres nombreux a etre initie a son usage ce qui facilitera d'autant plus la creation 
de vos applications Aj ax-PHP. 

Sachez evidemment, que si vous optez pour un autre editeur, cela ne change en rien la 
lecture de ce livre car vous pourrez creer de la meme maniere tous les scripts des applications 
Ajax-PHP avec votre editeur prefere. 

Pour ceux qui n'ont jamais utilise Dreamweaver, nous vous proposons de decouvrir son 
interface et les principales fonctions de son editeur de code. Les utilisateurs de Dreamwea- 
ver, quant a eux, peuvent passer directement au chapitre suivant. Nous leur conseillons 
quand meme de lire la partie sur la definition d'un site et notamment celle concernant la 
configuration du serveur d' evaluation pour disposer de la fonctionnalite d'apercu des 
pages. Cette derniere est bien pratique pour les ateliers qui vont suivre. 

Enfin, pour cette demonstration, nous utiliserons la version CS3 mais soyez rassures, les 
fonctionnalites que nous utilisons sont semblables dans les versions anterieures et vous 
pourrez facilement adapter ces presentations a la version de votre Dreamweaver. 
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Presentation de linterface de Dreamweaver 

L' interface de Dreamweaver CS3 est composee d'une fenetre Document (voir figure 7-1, 
repere 1) en haut de laquelle on trouve la barre d'outils documents comprenant, entre 
autres, trois boutons (voir figure 7-1, repere 2) qui permettent de selectionner le mode 
(mode Code, Fractionner ou mode Mixte et mode Creation). Une barre d'outils nommee 
Inserer (voir figure 7-1, repere 3) permet d'acceder a plusieurs categories de boutons 
classes par themes, a partir d'onglets. De nombreux panneaux disposes a droite et en bas 
de la fenetre de document permettent de parametrer les elements de la page ou d'acceder 
aux fonctionnalites de l'editeur. Le panneau Proprietes (voir figure 7-1, repere 4) affiche 
les caracteristiques de l'element selectionne dans la page. Le panneau Fichiers (voir 
figure 7-1, repere 5) permet d'ouvrir les differents fichiers du site. 
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Figure 7-1 

L' interface de Dreamweaver CS3 et ses principaux panneaux 

Definition dun site 

Avant de creer un fichier avec Dreamweaver, il est fortement recommande de definir la 
configuration du site. Nous allons configurer Dreamweaver avec le repertoire racine de 
Wamp5 afin que nos fichiers PHP et JavaScript soient accessibles depuis le serveur Web 
Local. 
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Depuis le menu, selectionnez Site puis Gerer les sites. Cette fenetre Gerer les sites 
permet de creer, modifier ou supprimer un site, par la suite vous pourrez ainsi afficher 
cette meme fenetre pour apporter des modifications a la configuration initiale d'un site. A 
noter que pour creer un site rapidement, vous auriez aussi pu selectionner le menu Site 
puis Nouveau site pour arriver directement a la fenetre Definition d'un site que nous 
allons vous presenter ci-apres. Dans la fenetre Gerer les sites, cliquez sur le bouton 
Nouveau puis selectionnez Site. La fenetre Definition d'un site s'affiche a l'ecran (voir 
figure 7-2). Pour definir un nouveau site, vous pouvez utiliser 1' assistant (onglet Elemen- 
taire) ou le mode Avance (onglet Avance). Cliquez sur l'onglet Avance car nous allons 
saisir nos parametres sans utiliser 1' assistant de configuration. 
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Figure 7-2 

La categorie Infos locales de la fenetre Definition du site permet de definir le nom du site et le dossier racine 
sous lequel seront stockes lesfichiers duprojet. 

Informations locales 

La premiere categorie selectionnee affiche la page dediee aux informations locales (voir 
figure 7-2). Cette fenetre contient de nombreux champs mais seuls les deux premiers 
pourront etre renseignes pour une configuration minimale d'un site. 

• Le premier champ permet de renseigner le nom du site, soit SITEajax dans notre exemple. 

• Le second champ permet d'indiquer le chemin vers le repertoire dans lequel seront 
stockes les fichiers du site. Dans notre exemple, nous selectionnerons le chemin qui 
correspond au repertoire SITEajax deja cree lors de 1' installation de 1' infrastructure 
serveur : 



C:\wamp\www\SITEajax\ 

En dessous de ces deux champs, d'autres options peuvent etre configurees. Dans le cadre 
de cet ouvrage, il n'est pas necessaire de configurer ces options mais nous detaillerons 
cependant leur usage ci-dessous : 

• Un dossier special permet de stacker les fichiers images : il est d'usage de separer les 
medias dans la structure d'un site Internet ; les fichiers HTML, images, sons, videos, 
etc., sont toujours enregistres dans des repertoires differents. 

• Un champ Adresse HTTP permet d'indiquer l'URL pour laquelle votre site sera 
consultable en ligne. Ainsi, Dreamweaver peut verifier la validite des hyperliens que 
vous avez integres dans le site. 
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Une case a cocher Cache permet d'activer la memorisation des informations du site 
afin d'accelerer les differents traitements de l'editeur. Vous pouvez cocher cette option, 
mais elle sera surtout indispensable pour les sites de grande envergure. 



Informations distantes 

Vous pouvez aussi selectionner la categorie Infos distantes dans le cadre de gauche (voir 
figure 7-3). Elle permet de configurer les parametres pour transferer vos fichiers sur un 
serveur distant. Dans le cadre de cet ouvrage, vous utiliserez uniquement le serveur local 
precedemment installe avec Wamp5 et vous n'aurez pas a utiliser de serveur distant. Cepen- 
dant, nous detaillons la procedure de parametrage de cette categorie afin que vous puissiez 
par la suite transferer vos applications sur un serveur de production. 

Dans la partie de droite, selectionnez l'option FTP dans le menu deroulant. Saisissez 
ensuite les parametres de votre compte FTP dans les champs appropries de la fenetre. Les 
informations concernant l'hote FTP, le repertoire de l'hote, le nom de l'utilisateur et le mot 
de passe doivent vous etre fournis par votre hebergeur (a titre d' illustration, vous trouverez 
dans le tableau 7-1 des exemples de parametres possibles pour un compte FTP). 

Tableau 7-1 Description des parametres d'un compte FTP et exemples de configuration 
(ces parametres doivent vous etre communiques par votre hebergeur) 



Adresse Internet (nom ou IP) du serveur FTP 


ftp.monsite.com 
(ou 213.185.36.111) 


Repertoire distant dans lequel vous devez telecharger vos fichiers. 
(champ optionnel chez certains hebergeurs) 


/web/ 

/httpdocs/ ou encore /html/... 


Nom du compte FTP 


ajax 


Mot de passe FTP 


1234 



Au terme de votre saisie, vous pouvez verifier 1' exactitude de vos informations en 
cliquant sur le bouton Test. Cliquez ensuite sur OK puis sur le bouton Terminer de la fenetre 
Modifier les sites pour confirmer vos modifications. 
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Figure 7-3 

La categorie Infos distantes de la fenetre Definition du site permet de definir les differents parametres 
pour la publication de votre site sur le serveur distant en FTP. 
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Dans la partie inferieure de la fenetre, d'autres options peuvent egalement etre configurees. 
Selon les particularites de votre connexion a Internet ou de votre pare-feu, vous pouvez 
utiliser l'option FTP passif ou indiquer les parametres de votre pare-feu dans la fenetre 
Preferences de Dreamweaver (si votre reseau local est equipe d'un pare-feu). L'option 
SSH permet de vous connecter en mode securise code si votre site distant a ete configure 
en consequence. 

Serveur devaluation 

La page de la categorie Serveur d' evaluation regroupe les parametres destines a confi- 
gurer le serveur de test : ceux-ci permettront ensuite de pouvoir utiliser certaines fonction- 
nalites de Dreamweaver comme l'apercu dans le navigateur d'une page PHP ou encore 
d'utiliser les comportements serveur de Dreamweaver (voir l'encadre de la page suivante 
pour en savoir plus sur les comportements serveur). Dans le cadre de cet ouvrage, nous 
n'utiliserons pas les comportements serveur, par contre vous apprecierez certainement 
d' avoir rapidement un apercu de votre page PHP dans le Web Local de votre serveur de 
developpement, aussi nous vous conseillons de suivre la procedure ci-dessous pour 
configurer un serveur devaluation pour Dreamweaver. 

Pour configurer la categorie Serveur devaluation commencez par choisir le modele de 
serveur en selectionnant le couple PHP/MySQL dans la liste deroulante. En dessous de 
ce premier champ, il faut choisir l'acces en mode Local/Reseau puisque le serveur Web, 
le moteur PHP et le serveur MySQL (installes avec la suite Wamp5) sont disponibles sur 
l'ordinateur de developpement ou est installe Dreamweaver. Dans le troisieme champ, 
vous n'avez rien a changer car le dossier du serveur devaluation est le meme que celui 
de la racine locale (revoir page Infos locales) : C:\wamp\www\SITEajax\. Par contre, l'URL 
sous laquelle sera disponible le site sur le serveur devaluation est http: //local host/ 
SITEajax/ car la racine du serveur http: //local host/ se trouve au niveau du dossier 
C:\wamp\www\. II convient done d'ajouter le nom du repertoire a la suite de l'URL racine 
dans le champ Prefixe d'URL (voir figure 7-4). 

Vous avez maintenant termine la configuration de votre site et il ne vous reste plus qu'a 
cliquer sur le bouton OK en bas de la fenetre pour valider votre site. 



Figure 7-4 
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d 'evaluation de la fenetre 
Definition du site permet 
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Les comportements serveur de PHP 

Les comportements serveur permettent de generer automatiquement des scripts PHP en interaction avec 
une base de donnees. Dans le cadre de cet ouvrage, nous n'utiliserons pas les comportements serveur de 
Dreamweaver pour creer nos scripts PHP, mais si vous etes interesse par ces fonctionnalit.es, nous vous 
invitons a vous referer a un autre ouvrage Eyrolles du meme auteur entierement dedie aux compor- 
tements de serveur de Dreamweaver : PHP/MySQL avec Dreamweaver. 



Editeur HTML 



L'editeur de Dreamweaver permet de travailler selon trois modes differents : mode Crea- 
tion, mode Code ou mode Mixte. Le mode Creation permet de creer facilement des pages 
HTML en Wysiwyg (What You See Is What You Get ou encore « Ce que vous voyez est ce 
que vous obtenez ») ainsi l'utilisateur voit directement a l'ecran a quoi ressemblera le 
resultat final. Ce mode est tres bien adapte a la creation de pages HTML car grace a cette 
interface intuitive l'utilisateur peut mettre en forme tres rapidement les elements qui 
composent sa page. 

Avant d'utiliser l'editeur, nous allons creer une nouvelle page HTML. Pour cela, cliquez 
depuis le menu sur Fichier puis selectionnez Nouveau (ou utilisez le raccourci clavier 
Ctrl + N). Dans la fenetre Nouveau document, selectionnez Page vierge dans la premiere 
colonne puis HTML dans la seconde puis validez en cliquant sur le bouton Creer. A noter 
que Dreamweaver permet aussi de choisir de nombreuses mises en forme pre-configu- 
rees (troisieme colonne de la fenetre Nouveau document) mais que dans le cadre de cet 
ouvrage nous n'utiliserons pas cette option. 

Par defaut le nouveau document cree s'affiche en mode Creation, mais vous pourrez 
passer facilement du mode Code au mode Creation en cliquant simplement sur le bouton 
correspondant situe dans la barre d'outils document (si cette barre d'outils n'apparait pas, 
cliquez sur Affichage>Barre d'outils et cochez Document). 



La barre d'outils Insertion 

Dans une page HTML, la barre d'lnsertion de Dreamweaver comporte sept onglets qui 
permettent d'acceder chacun a un panneau different. Chaque panneau comporte des 
boutons classes par theme (Commun, Mise en forme, Formulaire...) qui permettent 
d'inserer des elements dans la page. 

L insertion peut etre effectuee par un clic sur un simple bouton place dans le panneau, 
ou a l'aide d'un menu deroulant correspondant a une sous-categorie (la presence de 
ce menu est signalee par une petite fleche situee a cote du bouton). Dans la majorite 
des cas, une boite de dialogue s'affiche afin de renseigner les parametres de l'element a 
inserer. 

Cette barre d'outils Insertion est tres pratique en mode Creation car elle permet d'ajouter 
des elements dans la page Web par un simple clic ou a l'aide d'un glisser-deposer mais 
elle peut aussi etre exploitee en mode Code (dans ce cas il faudra placer au prealable le 
pointeur au point d'insertion dans le code de la page, voir la figure 7-5). 
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Figure 7-5 

Exemple d'insertion d'un lien hypertexte dans une page HTML 

Le panneau des Proprietes 

Le panneau Proprietes est contextuel et afflche routes les informations ou parametres lies 
a l'objet selectionne dans le document. Par exemple si vous choisissez une image, il liste 
tous les attributs de l'image, comme sa hauteur, sa largeur, l'emplacement du fichier 
image ou encore l'URL vers laquelle elle etablit un lien, s'il s'agit d'une image cliquable. 
Ces attributs peuvent etre ainsi facilement modifies grace aux champs correspondants 
dans le panneau Proprietes. 



Selecteur de balise 

Le selecteur de balise est une zone horizontale placee en bas de la fenetre Document. 
Selon la position du pointeur dans la fenetre Document, elle fait apparaitre toutes les 
balises parents ordonnees hierarchiquement de la gauche vers la droite. 

Cette fonction est tres appreciable lorsqu'on desire selectionner precisement un element 
HTML de la page Web en mode Creation. En effet, il suffit pour cela de cliquer sur la 
balise concernee dans le selecteur (voir figure 7-6) pour que tout le code correspondant 
apparaisse en surbrillance. Ce selecteur est egalement interessant pour identifier la partie 
de code correspondant a un element graphique ou a un tableau, car celle-ci apparait en 
surbrillance dans la zone de code. 
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Figure 7-6 

Le selecteur de balise 
permet de selectionner 
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Indicateur de code HTML 



L'indicateur de code vous guide dans la saisie de votre code. Vous pouvez l'utiliser 
depuis la fenetre du document en mode Code. 

Pour le configurer, cliquez depuis le menu de Dreamweaver sur 1' entree Edition puis 
1' option Preferences et selectionnez la rubrique Indicateur de code. Vous pouvez le 
desactiver ou augmenter son temps de reaction si vous le trouvez trop envahissant. De 
meme, depuis cette fenetre, vous pouvez neutraliser la creation automatique de la balise 
de fin (decocher 1' option Activer l'achevement automatique) ou reduire son action a 
certains types de codes (cochez les cases correspondant aux actions desirees : noms des 
balises, noms des attributs, valeurs des attributs, valeurs des fonctions...). 

Pour illustrer son fonctionnement, nous vous proposons de commenter son utilisation 
pour la creation d'une balise d'un tableau HTML. 

Creation d'une balise de tableau HTML avec l'indicateur de code (voir figure 7-7) : 

Depuis l'editeur de code (fenetre mode Code), saisissez le debut d'une balise de tableau, 
par exemple <t. L'indicateur apparait et vous propose les differentes balises HTML 
commencant par t (si la premiere lettre n'est pas suffisante pour afficher la bonne balise, 
saisissez une deuxieme lettre et ainsi de suite jusqu'a l'affichage correct de la balise desi- 
ree). Des que vous pouvez selectionner la balise desiree dans le menu deroulant, validez- 
la en appuyant sur la touche Entree. Le debut de la balise est complete automatiquement. 
Appuyez sur la touche Espace pour afficher de nouveau l'indicateur de code, cette fois en 
mode Attribut (notez qu'une petite icone precede chacun des attributs afin de vous rappe- 
ler le type de fonction auquel il appartient). De la meme maniere que pour les balises 
HTML, il suffit de valider 1' attribut desire pour qu'il apparaisse dans le code. Cette fois, 
le pointeur de la souris est positionne entre les guillemets de la valeur de 1' attribut. Si les 
valeurs attendues sont standards, un nouveau menu deroulant propose les choix possi- 
bles. Dans le cas contraire, saisissez la valeur (par exemple 1 pour 1' attribut border). 
Ensuite, appuyez sur la touche du clavier Fin pour vous placer apres les guillemets, puis 
sur la touche Espace pour saisir un autre argument. Renouvelez la meme operation pour 
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le deuxieme argument et terminez votre saisie par un caractere >, afin que l'inspecteur 
affiche automatiquement la balise de fermeture correspondante. 
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Figure 7-7 

L' indicateur de code vous permet de saisir facilement vos balises HTML sans avoir a vous referer 
a la documentation. 



Editeur PHP 



Pour la creation des fichiers PHP nous allons nous interesser plus particulierement a 
1' utilisation du mode Code et a ses fonctions qui nous assisteront dans l'ecriture de nos 
scripts PHP. 

Afin d'utiliser l'editeur PHP, nous allons creer une nouvelle page PHP. Pour cela, cliquez 
dans le menu sur Fichier puis selectionnez Nouveau (ou utilisez le raccourci clavier 
Ctrl + N). Dans la fenetre Nouveau document, selectionnez Page vierge dans la premiere 
colonne, PHP dans la seconde, puis validez en cliquant sur le bouton Creer. 

Une fois le nouveau document cree, vous pouvez passer en mode Code (si cela n'est pas 
deja le cas) en le selectionnant dans le menu Affichage>Code ou en cliquant sur le bouton 
Code situe a gauche de la barre d'outils Document. 



Options de l'editeur de code 

Avant de saisir la premiere ligne de code, assurez-vous que toutes les options de l'editeur 
sont configurees correctement. Pour cela, cliquez sur le bouton d'options a droite de la 
barre d'outils Document (voir figure 7-8 ; si cette barre d'outils n'apparait pas, cliquez 
sur Affichage>Barre d'outils et cochez Document). 

Parmi les differents choix du menu Option nous vous conseillons de valider les options 
qui correspondent aux definitions suivantes : 

• Retour automatique a la ligne - Renvoie le code a la ligne lorsqu'il excede la largeur 
de la fenetre de l'editeur. Nous vous conseillons de cocher cette option car elle rend la 
lecture plus confortable lors de la redaction des scripts. 
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Numero de ligne - Permet la numerotation des lignes dans la fenetre Document en 
mode Code ou dans l'inspecteur de code. Cette option est fort utile lors de vos 
premiers depannages de scripts, pour reperer la ligne signalee par le message d'erreur 
PHP. 

Surligner le code non valide - Pour eviter que Dreamweaver mette en surbrillance 
certaines balises HTML lors de la redaction de vos programmes PHP, il est indis- 
pensable de respecter l'equilibre du code HTML (une balise d'ouverture doit 
toujours etre fermee) si vous emulez des balises HTML a l'aide de scripts PHP (par 
exemple : echo "<TABLE>"). Cela permet notamment aux graphistes de pouvoir afficher 
correctement le document en mode Creation, meme apres l'ajout d'un script PHP dans 
la page. 

Coloration de la syntaxe - La coloration syntaxique est tres utile pour la recherche de 
pannes et pour la saisie. Dreamweaver permet d'utiliser la coloration syntaxique du 
langage PHP et il serait dommage de s'en priver. II est possible de configurer chaque 
couleur selon le type de code represente (pour acceder a cet ecran, affichez la fenetre 
Preferences, rubrique Coloration syntaxique et PHP, puis cliquez sur le bouton Modi- 
fier le modele de coloration). Pour une bonne lisibilite de votre code source, nous vous 
conseillons de conserver les couleurs attribuees par defaut. 

Retrait auto - Automatise la mise en retrait du code des que vous appuyez sur la touche 
Entree lors de la redaction du code. 
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Figure 7-8 

Le mode Code de Dreamweaver permet de saisir vos scripts avec le meme confort qu 'avec un editeur dedie au 
developpement de code source. Pour faciliter votre saisie des fonctions PHP, nous vous conseillons d'utiliser le 
raccourci clavier Ctrl + Espace. De meme, le bouton d' options de la barre d'outils Document active differentes 
fonctions de la fenetre Document, tres appreciables pour une utilisation en mode Code. 



Indicateur de code PHP 

L'indicateur de code utilise en PHP est le meme que celui que nous avons deja presente 
et utilise pour nous assister dans la creation de balise HTML (revoir la partie dediee a 
l'editeur HTML pour plus de details sur son parametrage). 
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Comme pour le HTML, l'indicateur de code permet de saisir du code PHP facilement et 
rapidement, sans avoir a se referer a la documentation. Pour illustrer son fonctionnement, 
nous vous proposons de commenter son utilisation pour le parametrage des arguments 
d'une fonction PHP. 



Aide a la saisie des fonctions PHP 

Dreamweaver propose un systeme d'aide a la saisie des fonctions PHP qui se materialise par un menu 
deroulant suggerant les differentes fonctions commencant par les premiers caracteres deja saisis. Pour 
faire apparaitre ce menu, il suffit d'utiliser la combinaison de touches Ctrl + Espace. 



Creation d'une fonction PHP avec l'indicateur de code : 

L'indicateur de code peut aussi gerer les differentes fonctions PHP, ainsi que les variables 
HTTP (par exemple, si vous saisissez $_, il vous propose les differents types de variables 
serveurs disponibles dans un menu deroulant : $_GET, $_P0ST...). En guise d' illustration, 
voici la demarche a suivre afin d' exploiter pleinement les possibilites de cet outil pour 
declarer une constante insensible a la casse (nous utilisons pour cela la fonction defi net ), 
avec comme troisieme argument la valeur 1, voir figure 7-9). Commencez par saisir le 
debut de la fonction dans une zone PHP de votre page (zone encadree par les balises 
<? php et ?>), soit « define »). Une zone d'assistance s'affiche alors en dessous de la 
fonction et vous rappelle le type et le role des differents arguments attendus pour la 
fonction. Commencez la saisie en suivant ces indications (il est a noter que, des que la 
saisie du premier argument commence, la zone d'assistance disparait). Si vous ajoutez 
ensuite une virgule, la zone d'assistance apparait de nouveau et vous informe sur les 
arguments restants a saisir. Procedez de la meme maniere pour tous les arguments 
attendus et terminez votre saisie par une parenfhese fermante. N'oubliez pas le point- 
virgule si vous etes a la fin de 1' instruction. 



Figure 7-9 

L'indicateur de code 
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define ( "CONSTANTE" , "Bonjour" , I ) ; 
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La barre d'outils Inserer, option PHP 

L'onglet PHP de la barre d'outils Inserer permet d'ajouter rapidement des balises PHP 
dans la fenetre Document en mode Code. Pour que l'onglet PHP apparaisse, il faut se 
trouver dans une page dynamique PHP (menu Fichier>Nouveau>Page vierge + PHP). 
Hormis le bouton d' insertion de commentaire, les differents boutons du panneau inserent 
des balises PHP de debut et de fin (<?php et ?>). Ce panneau est done destine a inserer du code 
PHP isole dans le code source d'une page HTML et non a vous assister dans l'edition 
d'un script PHP de plusieurs instructions. Les fonctions des boutons de l'onglet PHP 
sont les suivantes : 

Ajout de variables de formulaires : 

<?php $_P0ST[]; ?> 

Ajout de variables d'URL : 

<?php $_GET[]; ?> 

Ajout de variables de session : 

<?php $_SESSI0N[]; ?> 

Ajout de variables de cookie : 

<?php $_CO0KIE[]; ?> 

Ajout de la fonction i ncl ude : 

<?php includeO; ?> 

Ajout de la fonction requi re? : 

<?php requi ret ); ?> 

Ajout d'un bloc de code PHP : 

<?php ?> 

Ajout de la fonction echo (affichage) : 

<?php echo ?> 

Ajout d'un commentaire dans le code : 
/* */ 

Ajout de la fonction i f (test d'une condition) : 

<?php if ?> 

Ajout de la fonction else (complementaire de la fonction i f ) : 

<?php else ?> 

Ajout d'une balise par le biais du selecteur de balise 

Test d'une page PHP 

Pour vous initier a l'enregistrement et a la procedure de test d'une page PHP depuis le 
serveur Web Local, nous vous proposons de creer un premier document PHP avec 
Dreamweaver. 

Le document que nous allons creer devra afficher une page phpinfo. Cette page utilisera 
la fonction phpi nf o ( ) pour afficher a l'ecran toutes les informations utiles sur la version et la 
configuration du PHP installe sur votre serveur. 
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A noter 

Une page phpinfo est deja disponible sur votre serveur local par I'intermediaire de la suite Wamp5 dans la 
page du localhost. Cependant, la page que nous allons creer vous sera certainement utile si vous posse- 
dez un hebergement Web car elle vous permettra de connaitre les caracteristiques du PHP installe sur 
votre serveur distant. Nous rappelons a ce sujet qu'il faut choisir un serveur de developpement local dont 
les caracteristiques sont proches de celles de votre serveur distant (evidemment, si vous n'avez pas 
encore choisi votre hebergeur, I'inverse est aussi valable...). 



Commencez par creer un nouveau document PHP en suivant la demarche detaillee au 
debut de cette partie. Enregistrez tout de suite votre document sous le nom phpinfo.php a 
la racine de SITEajax. A la racine de SITEajax, vous devez retrouver le fichier bonjour.php 
cree lors du test de 1' infrastructure serveur. 

Test avec I'apergu de Dreamweaver 

Assurez-vous que vous etes bien en mode Code (si besoin, cliquez sur le bouton Code 
place en haut a gauche de la fenetre Document). Dans la barre des outils Inserer, cliquez 
sur l'onglet PHP pour disposer des boutons dedies a PHP detailles precedemment. Placez 
votre pointeur entre les balises <body> et </body> puis cliquez sur le bouton Bloc de code 
afin d'ajouter automatiquement les balises ouvrante et fermante d'un script PHP ( <?php et 
?>). Ajoutez ensuite entre ces deux balises l'instruction suivante : phpinfo( ) ; puis enre- 
gistrez votre fichier en utilisant le raccourci clavier Ctrl + S (voir le code dans 1' editeur 
de figure 7-10). 

Avant de tester le fonctionnement de cette page PHP, assurez-vous que le serveur Web 
Local (Wamp5) est bien demarre. Cliquez ensuite sur le bouton Apercu/Debogage (icone 
en forme de globe dans la barre d' outils de la fenetre Document, vous pouvez aussi utiliser 
la touche F12). Une fenetre du navigateur par defaut doit alors s'ouvrir pour vous permet- 
tre de tester votre page (voir figure 7-10). II est important pour la suite que la page a tester 
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s'ouvre bien depuis le serveur Web Local http: //I ocal host. Pour que cela puisse se faire, 
il faut au prealable avoir configure correctement le serveur d' evaluation du site Dream- 
weaver (revoir si besoin la partie Definition d'un site / serveur d'eval uation detaillee 
precedemment) et que le serveur Wamp5 soit en marche. 

Test avec les raccourcis clavier de Windows 

Une fois que vous aurez teste une premiere fois votre page dans le Web Local, la barre des 
taches de votre ordinateur (zone situee au centre et en bas de l'ecran du PC) affiche deux 
boutons. Lun correspond a l'editeur Dreamweaver et 1' autre au navigateur qui affiche la 
page phpinfo.php. Vous pouvez maintenant passer d'une fenetre a l'autre en cliquant sur le 
bouton correspondant a la page desiree pour mettre au point progressivement votre 
programme, mais il est beaucoup plus rapide d'utiliser le raccourci clavier Alt + Tab. 

Imaginons maintenant que vous etes dans le Web Local (le navigateur) et que le resultat 
de la page que nous venons de creer ne vous convienne pas. II vous faut alors basculer de 
nouveau dans l'editeur (en utilisant evidemment le raccourci clavier Alt + Tab) afin 
de modifier le contenu du code source de la page PHP. Pour illustrer cette demarche, 
nous allons ajouter le titre PHPINFO a la page. Une fois la modification effectuee, enre- 
gistrez votre page (en utilisant le raccourci clavier Ctrl + S) puis basculez de nouveau 
dans le navigateur (Alt + Tab) afin de voir le resultat. Une fois dans le navigateur, vous 
devrez actualiser la page a l'aide du raccourci F5 (ou en cliquant sur le bouton Actualiser 
de votre navigateur) pour voir apparaitre l'ecran modifie. A noter que pour actualiser la 
page, vous pouvez aussi utiliser le raccouci Ctrl + R qui evite d' avoir a appuyer sur la 
touche F5 situee en haut du clavier. 

Meme si cette demarche peut paraitre un peu rebarbative au debut, vous allez vite apprecier 
le gain de temps dans vos developpements des que vous aurez acquis un peu de dexterite 
dans P usage repete de cette serie de raccourcis clavier (voir figure 7-11). 



Figure 7-11 

Enchainement 
des dijferents 
raccourcis clavier 
utilises en phase 
de developpement 



Procedure de mise au point d'un fichier PHP 

Editeur Dreamweaver 2 '. Alt+Tab 



Navigateur affichant 
la page du serveur 




1 : Ctrl+S 



Document PHP (ex : phpinfo.php) 



Dreamweaver, un editeur polyvalent 



Chapitre 7 

Cette meme methode pourra aussi etre utilisee par la suite pour tester vos programmes 
Java Script. 

En phase de developpement, vous devrez tres souvent effectuer des tests repetes et si la 
methode de l'apercu de Dreamweaver peut paraitre plus rapide au debut, elle devient 
moins interessante des que vous aurez de multiples modifications a faire. De plus, 
s'ajoute a cela le fait que l'apercu cree a chaque test une nouvelle fenetre dans le navigateur, 
ce qui peut devenir vite envahissant pour des apercus repetes. 

Configuration du navigateur de test par defaut 

Le navigateur utilise par l'apercu de Dreamweaver peut etre defini dans la fenetre des 
preferences. Par la suite nous utiliserons toujours Firefox et son extension Firebug pour 
deboguer les programmes JavaScript et nous vous suggerons des maintenant de verifier 
que Firefox est bien configure comme navigateur par defaut. Pour cela, cliquez depuis le 
menu de Dreamweaver sur 1' entree Edition puis 1' option Preferences et selectionnez la 
rubrique Apercu dans le navigateur. Selectionnez Firefox dans la liste de la fenetre puis 
cocher 1' option Navigateur principal dans la rubrique Navigateur par defaut. La touche 
F12 (touche de raccourci pour declencher un apercu) doit alors apparaitre a droite du 
navigateur Firefox dans la liste de la fenetre. 

Les references PHP de poche 

Dans le panneau Resultats, onglet Reference, Dreamweaver met a votre disposition un 
dictionnaire de poche regroupant toutes les syntaxes des fonctions PHP. Pour y acceder, 
ouvrez le panneau Code et cliquez sur l'onglet Reference (n'hesitez pas a elargir la fene- 
tre afin de pouvoir lire les differentes options des menus deroulants). Dans le haut du 
panneau, selectionnez O'REILLY - Reference PHP de poche dans le premier menu deroulant 
Livre puis la famille de fonction que vous desirez consulter dans le deuxieme menu 
deroulant et enfin la fonction dans le troisieme menu deroulant. N'hesitez pas a consulter 
frequemment ces informations si vous avez un doute sur la syntaxe d'une fonction. 

Les references du langage SQL 

Dans le meme panneau Resultats onglet Reference, Dreamweaver met a votre disposition 
un second dictionnaire dedie au langage SQL. Vous pourrez ainsi vous assurer de la vali- 
dite de la syntaxe de vos requetes SQL avant de les integrer dans vos scripts PHP. Le 
chapitre sur le MySQL a la fin de cet ouvrage presente en detail les requetes et les clauses 
SQL couramment utilisees. 

Pour acceder a ce dictionnaire, vous devez au prealable ouvrir le panneau Resultat et 
cliquer sur l'onglet Reference. Dans le haut du panneau, selectionnez O'REILLY - Refe- 
rence du langage SQL dans le premier menu deroulant Livre puis la rubrique que vous 
desirez consulter dans le deuxieme menu deroulant (selectionnez, par exemple, la rubri- 
que Reference des commandes) et enfin la sous-rubrique dans le troisieme menu derou- 
lant (dans notre exemple, ce troisieme menu affiche une liste de commandes parmi 
lesquelles nous selectionnons SELECT). 

Editeur JavaScript 

Lintegration d'un programme JavaScript dans une page HTML peut etre effectue tres 
simplement a l'aide d'une balise <script> qui comportera un attribut type precisant qu'il 
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s'agit d'un programme JavaScript, soit <script type="text/javascript">. Dans ce cas, le 
code JavaScript saisi dans cette balise sera reconnu par le navigateur et interprets en 
rapport. Cette balise peut etre placee dans la tete (balise <head>) mais aussi dans le corps 
de la page (balise <body>) selon l'usage du programme. 

Exemple de script place directement dans une page HTML : 

|<script type="text/javascript"> 
alert( "BONJOUR"): 
</script> 

En pratique, il est souvent plus judicieux de placer son programme dans un fichier 
externe de sorte a mutualiser les scripts du programme avec les autres pages du site. Dans 
ce cas, la balise <script> sera vide mais comportera un second attribut src qui indiquera 
la localisation du fichier externe (dans 1' exemple ci-dessous le fichier externe se trouve 
dans le meme repertoire que la page HTML). 

Exemple d'un lien, place dans une page HTML, appelant un fichier JavaScript externe : 

<script type=" text/ javascript" src="scriptsJS. js"X/script> 

Pour que vous puissiez facilement creer des programmes JavaScript avec Dreamweaver, 
nous vous proposons maintenant d'illustrer ci-dessous ces deux methodes avec deux 
exemples tres simples. 

Insertion d'un script JavaScript dans une page HTML 

Commencez par creer une page HTML comme nous l'avons indique au debut de ce 
chapitre. Placez ensuite votre pointeur au point d'insertion oil vous desirez ajouter votre 
script. 

Dans la barre d'outils Insertion, cliquez sur l'onglet du panneau Commun, puis cliquez 
sur l'icone Script (voir figure 7-12) et selectionnez l'option Script. Dans la boite de 
dialogue, selectionnez pour le type, l'option text/javascript puis saisissez le script 
desire dans le champ Contenu. Pour ce premier exemple, nous saisirons une simple fonc- 
tion JavaScript d'alerte (al ert( ' Bonjour ' )) qui afhchera le mot Bonjour dans une boite de 
dialogue. Une fois le script saisi, validez la fenetre en cliquant sur le bouton OK. Le 
script doit ensuite apparaitre dans le code de la page HTML a l'endroit du point d'insertion. 



Figure 7-12 
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Test d'une page JavaScript 

Pour tester rapidement votre page, vous pouvez aussi cliquer sur l'icone en forme de 
globe dans la barre d'outils de la fenetre Document (vous pouvez aussi utiliser la touche 
F12). Une fenetre du navigateur par defaut doit alors s'ouvrir pour vous permettre de 
tester votre premier programme JavaScript. Cependant, pour des essais repetitifs, nous 
vous conseillons (comme pour le test de la page PHP) d' utiliser les raccourcis Windows 
pour etre plus productif pour la mise au point de votre programme. 

Comme par la suite nous utiliserons des programmes JavaScript en interaction avec des 
fichiers PHP, il est important que la page HTML contenant le programme JavaScript a 
tester s'ouvre aussi depuis le serveur Web Local http: //I ocal host. Si ce n'est pas le cas, 
revoyez la configuration du serveur d' evaluation du site Dreamweaver et assurez vous 
que le serveur Wamp5 est en marche. 

Evidemment, une fois la page HTML affichee dans le Web Local, vous devrez ensuite 
utiliser les fonctionnalites de Firebug pour mettre au point vos programmes JavaScript 
contenus dans la page HTML. Nous detaillerons ces fonctionnalites lors des premiers 
ateliers de la partie 3 de cet ouvrage. 

tier un fichier JavaScript externe dans une page HTML 

Commencons par creer le fichier JavaScript externe. Pour cela cliquez dans le menu sur 
Fichier puis selectionnez Nouveau (ou utilisez le raccourci clavier Ctrl + N). Dans la 
fenetre Nouveau document, selectionnez Page vierge dans la premiere colonne et Java- 
script dans la seconde puis validez en cliquant sur le bouton Creer. 

Une fois le fichier cree, vous pouvez saisir votre programme JavaScript directement 
dans le fichier sans avoir a ajouter de balise specifique (voir figure 7-13). Pour ce 
premier exemple, nous nous contenterons d'une simple fonction AfficherO executant 
une fenetre d'alerte dans la page, mais sachez que Dreamweaver peut aussi vous assis- 
ter dans la creation d'un programme plus consequent a l'aide de son indicateur de code 
JavaScript (comme pour le HTML et le PHP). Enregistrez ensuite ce fichier dans le 
meme repertoire que celui de la page HTML sous le nom de votre choix mais avec 
P extension .js. 

Figure 7-13 ■MRHPPVF - 
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Creez ensuite une page HTML comme nous l'avons indique au debut de ce chapitre. 
Avant de lier le fichier JavaScript dans la page HTML, veillez a enregistrer la page 
HTML concernee arm que Dreamweaver puisse ensuite creer automatiquement le 
chemin relatif qui mene au fichier source JavaScript. 

Positionnez votre pointeur dans la balise <head> de la page, puis depuis la barre d'outils 
Insertion, cliquez sur l'onglet du panneau Commun, cliquez sur l'icone Script (voir 
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repere 1 figure 7-14) puis selectionnez 1' option Script. Dans la boite de dialogue, selec- 
tionnez pour le type, l'option text/javascript puis cliquez sur le petit dossier jaune situe 
a droite du champ Source (voir repere 2 voir figure 7-14). Localisez le fichier JS qui doit 
etre utilise et validez votre choix en cliquant sur le bouton OK. Validez ensuite la fenetre 
Script en cliquant une seconde fois sur le bouton OK (voir repere 3 figure 7-14). Le lien 
doit alors apparaitre dans le code de la page. Vous pouvez desormais exploiter toutes les 
fonctions du fichier externe comme si les declarations de ces fonctions etaient placees 
directement dans la page HTML (voir repere 4 figure 7-14). 



Figure 7-14 
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Les fragments de code JavaScript 

Dans le panneau Fichier onglet Fragment de code, Dreamweaver met a votre disposition 
toute une serie de code preenregistres. lis sont regroupes selon leur usage et classes dans 
des dossiers specifiques. Pour inserer un de ces fragments dans votre fichier JavaScript, il 
suffit de placer le curseur au point d' insertion dans la page et de faire un double clic sur 
le fragment desire. II sera alors copie automatiquement dans le document en cours a 
l'endroit du point d' insertion. 

Par la suite vous pourrez aussi creer vos propres fragments de code (pour le JavaScript, 
mais aussi pour le PHP !). Vous pourrez ainsi capitaliser vos realisations, voire les parta- 
ger avec d'autres developpeurs. Pour creer un fragment personnalise, il suffit d'utiliser 
les boutons situes en bas du panneau des fragments et de l'enregistrer dans le dossier 
correspondant (pour les scripts PHP, pensez a creer au prealable un dossier PHP au 
meme niveau que le dossier JavaScript actuel pour accueillir votre futures realisations). 
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Les references JavaScript de poche 

Dans le panneau Resultat onglet Reference, Dreamweaver met a votre disposition un 
dictionnaire de poche regroupant toutes les syntaxes des fonctions JavaScript. Pour y 
acceder, ouvrez le panneau Resultat et cliquez sur l'onglet Reference. Dans le haut du 
panneau, selectionnez O'REILLY - Reference Javascript dans le premier menu deroulant 
Livre puis la famille de fonction que vous desirez consulter dans le deuxieme menu 
deroulant et enfin la fonction dans le troisieme menu deroulant. N'hesitez pas a consulter 
frequemment ces informations si vous avez un doute sur la syntaxe d'une fonction. 



Partie 



Ateliers de creation 
d'applications Ajax-PHP 



L'objectif des ateliers de cette partie n'est pas de realiser des applications toujours 
operationnelles et sophistiquees mais au contraire de batir pas a pas des applications 
Ajax tres simples, a partir de quelques lignes de code, en alternant judicieusement des 
tests pratiques, analyses, constats et ameliorations. Ainsi, au fil des versions successives 
de ces applications pedagogiques, vous decouvrirez toutes les structures possibles et 
comprendrez le role des differentes parties d'une application Ajax-PHP. 
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Applications 
Ajax-PHP synchrones 



Pour commencer simplement, je vous propose une serie d' ateliers qui vous permettra de 
creer progressivement une premiere application synchrone. 

Pour illustrer son fonctionnement nous realiserons une petite application qui simulera le 
fonctionnement d'une machine a sous en ligne. Cote client, l'application sera constitute 
d'une page HTML dans laquelle nous construirons progressivement un moteur Ajax dont 
l'objectif sera de simuler le fonctionnement d'une machine a sous. Pour cela l'utilisateur 
devra appuyer sur un bouton pour declencher une requete depuis son navigateur et relan- 
cer ainsi la machine a sous. Cote serve ur, un fichier PHP receptionnera et traitera la 
requete client puis renverra le montant du gain en retour qui s'affichera ensuite dans 
la page Web. 



Atelier 8-1 : requete synchrone sur un fichier texte sans feuille 
de styles 

Composition du systeme 

Nous allons commencer par mettre en place une structure minimaliste pour tester le fonc- 
tionnement d'une premiere requete synchrone sur un simple fichier texte (voir figure 8-1). 
Cette premiere structure est composee : 

• d'une page HTML (index.html) dans laquelle nous allons integrer un bouton de 
formulaire pour declencher le jeu, une zone d'affichage du resultat et le JavaScript du 
moteur Ajax ; 

• d'un simple fichier texte (gainMax.txt) dans lequel nous allons saisir la valeur du gain 
maximum, soit 100. 
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Figure 8-1 

Saisie du moteur Ajax dans la balise <head> de la page 



Prerequis concernant I'objet XMLHttpRequest (XHR) 

Comme vous avez deja decouvert le fonctionnement de I'objet XMLHttpRequest dans le chapitre 4 de ce 
meme ouvrage, nous nous appuierons sur ce prerequis dans la redaction des ateliers de ce chapitre. Si 
toutefois certaines methodes ou propriet.es de cet objet vous semblent inconnues, n'hesitez pas a vous 
reporter au chapitre 4 pour revoir son concept. 

A noter aussi que nous aurons souvent I'occasion de faire reference a I'objet XMLHttpRequest dans cet 
ouvrage et pour alleger I'ecriture, nous utiliserons frequemment son appellation abregee XHR. 



Fonctionnement du systeme 

Le bouton JOUER de la page permettra a Putilisateur d'afflcher la valeur maximum des 
gains. Ce bouton sera relie a un gestionnaire d'evenement oncl i ck qui appellera une fonc- 
tion jouerO (voir code 8-1, a noter que pour cette premiere application le gestionnaire 
sera integre dans la balise HTML <input> mais nous verrons par la suite qu'il est prefe- 
rable de declarer les gestionnaires d'evenements directement dans le code JavaScript afin 
de bien separer le programme de la structure de la page ). 

Cette fonction declenchera le moteur Ajax (voir code 8-2) qui creera un objet XMLHttp- 
Request (par la suite, nous utiliserons son appellation abregee XHR) puis le configurera 
(a l'aide de la methode open( ) de I'objet : choix de la methode GET et ciblage du fichier 
gainMax.txt en mode Synchrone) avant d'envoyer la requete (a l'aide de la methode 
sendO de I'objet). 
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L'information contenue dans le fichier texte gainMax.txt (soit la valeur 100) sera ensuite 
retournee au navigateur dans le corps de la reponse. Cette valeur sera enregistree dans 
la variable nouveauGain par le biais de la propriete responseText de l'objet puis affectee a la 
zone de resultat a l'aide de la propriete i nnerHTML de l'element resultat. 

Conception du systeme 



Telechargement des codes sources des ateliers 

Le moment est venu de passer a Taction. Les explications des differents ateliers vous permettront de creer 
vos differents scripts a partir de zero. Cependant, vous avez la possibilite de telecharger tous les fichiers 
des exemples de cet ouvrage a votre disposition dans I'extension du livre sur le site www.editions-eyrol- 
les.com (utilisez le nom de I'auteur comme mot cle pour acceder a I'extension de cet ouvrage). 
Vous pourrez ainsi vous reporter a ces fichiers pour les comparer avec les votres en cas de probleme, ou 
encore tester directement le fonctionnement de tous les ateliers directement sur ces ressources si vous ne 
desirez pas saisir vous-meme les codes. 



Ouvrez Dreamweaver (ou l'editeur de votre choix) et selectionnez le site Ajax que nous 
avons cree lors de 1' installation de l'environnement de developpement. Creez un nouveau 
fichier HTML et enregistrez-le tout de suite dans le repertoire /atel iers/chap8/atel ier8-l/ 
en le nommant 1 ndex . html . 



Organisation de vos ateliers 

Nous vous suggerons de creer chaque atelier dans un repertoire different portant le nom de I'atelier afin 
de bien isoler les fichiers utilises dans le cadre de nos essais. Les deux fichiers (index.html et gain- 
Max.txt) de ce premier atelier seront done enregistres dans un repertoire nomme « atelier8-1 ». Ainsi 
chaque atelier sera independant de I'autre, le seul element qui ne sera pas dans le repertoire est I'image 
logo.jpg placee en haut de chaque page index.html, cette derniere etant commune a tous les 
ateliers, nous I'avons place dans un repertoire nomme /commun/. 



Dans ce premier exemple, nous avons choisi de ne pas lier la page HTML a une feuille de 
styles par souci de simplicity pour la mise en oeuvre de votre premiere application. Nean- 
moins, nous allons structurer les differentes zones de la page HTML avec des balises 
<div> en prevision de la future feuille de styles que nous allons appliquer ensuite a cette 
page. Les deux elements de la page (la zone <span> du resultat et le formulaire contenant 
le bouton JOUER) sont tous les deux inseres dans des balises <div> differentes et 
1' ensemble est regroupe dans une troisieme balise <div> qui servira de conteneur pour la 
page (voir code 8-1). 

Code 8-1 : 

<div> 
<!--zone du resultat--> 
<div> 

Bravo, vous avez gagne <span id="resultat">0</span> euros 
</div> 

<!--zone du formulai re--> 
<div> 
<form> 
<input name="button" type="button" onclick="jouer() ;" value="J0UER" /> 
</form> 
</div> 
</div> 
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Ressources sur les technologies associees 

Nous avons regroupe dans la partie 4 de cet ouvrage plusieurs chapitres sur chacune des technologies 
utilisees dans les applications des ateliers. Nous vous invitons a vous y reporter pour obtenir des comple- 
ments d'informations si les explications qui accompagnent ces ateliers ne vous suffisent pas. 



Placez-vous ensuite dans la balise <head> de la page et saisissez le code 8-2 ci-dessous. 
Code 8-2 : 



<script language="javascript" type="text/javascript"> 

/* MOTEUR AJAX */ 

function jouerO { 
/* Config et envoi de la requete SYNCHRONE : */ 

//creation d'une requete uniquement pour Firefox 

objetXHR = new XMLHttpRequestO ; 

//Config. requete GET et Synchrone 

objetXHR. open ("get", "gainMax.txt", false); 

//envoi de la requete 

objetXHR. send(null); 
/* Attente du retour SYNCHRONE : */ 

//recuperation du resultat renvoye par le serveur 

var nouveauGain = objetXHR. responseText; 

//Affecte le nouveau gain a la zone resultat 

document. getElementBy Id ("resultat") .innerHTML=nouveauGain; 
} 

/* FIN D u MOTEUR AJAX */ 

</script> 

Enregistrez le fichier index.html apres avoir termine la saisie puis ouvrez un fichier 
texte (Depuis le menu de Dreamweaver : Fichier>Nouveau cliquez sur le bouton 
Autres a gauche de la fenetre puis selectionnez le type Texte dans la liste). Saisissez la 
valeur 100 dans le contenu du fichier et enregistrez-le sous le nom gainMax.txt (voir 
figure 8-2). 
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Creation du fichier texte gainMax.txt 
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Pour ce premier script, il est interessant d'expliquer d'une facon detaillee le code de cette 
page HTML afin de bien comprendre le mecanisme de cette application Ajax. 

Dans la partie visible de page HTML (balise <body>, voir le code 8-1), la zone dans 
laquelle s'affichera le resultat est delimitee par une balise <span> a laquelle nous avons 
ajoute un identifiant resul tat qui permettra ensuite d'en modifier le contenu a l'aide de la 
propriete innerHTML de l'element ainsi constitue. Lors de son premier affichage, le contenu 
de cette balise est initialise avec la valeur 0. Cette valeur sera ensuite remplacee par la 
valeur contenue dans le fichier texte (100). 

<span id="resultat">0</span> 

Un peu plus bas, un formulaire a ete ajoute afin d'inserer un bouton de commande 
JOUER dans la page HTML. L'element <1 i nput> est lie a un gestionnaire d'evenement qui 
permettra d'appeler la fonction contenant le moteur Ajax (onclick="jouer()"). L'utilisateur 
pourra ainsi afficher le contenu retourne par le fichier texte par un simple clic sur ce bouton. 
A noter que la valeur du fichier texte etant toujours la meme, il est necessaire d'appuyer 
sur le bouton d'actualisation du navigateur (ou d'utiliser le raccourci clavier F5) pour 
revenir a l'etat initial de la page avant d'appuyer de nouveau sur le bouton JOUER. 

I<form> 
<input type="button" onclick="jouer() ;" value="J0UER" /> 
</form> 

Passons maintenant a la fonction jouer( ) contenant le moteur Ajax. La premiere instruc- 
tion de cette fonction permet d'instancier la classe XMLHttpRequest et de creer un objet 
nomme objetXHR. 

| objetXHR = new XMLHttpRequestO ; 

Une fois l'objet cree, il faut ensuite le configurer avec sa methode open( ). Trois parame- 
tres seront necessaires a sa configuration. Le premier permet d'indiquer que nous desi- 
rons utiliser la methode GET pour emettre la requete HTTP. Le second precise le fichier 
cible par la requete, soit le fichier texte gainMax.txt pour ce premier exemple. Enfin le 
troisieme parametre est initialise avec la valeur f al se afin d'indiquer que la requete devra 
etre en mode synchrone. 

objetXHR. openC'get", "gainMax.txt", false) ; 

Maintenant que l'objet est cree et configure, il ne reste plus qu'a l'envoyer. Pour cela, 
nous utiliserons la methode sendO de l'objet. A noter que l'argument de cette methode 
sera utilise lorsque nous aurons une methode POST avec des parametres a communiquer au 
serveur. Comme ce n'est pas le cas de notre exemple, ce parametre sera configure avec la 
valeur null. 

| objetXHR.send(null); 

La requete etant synchrone, la communication restera ouverte dans l'attente de la reponse 
comme dans le cas d'une requete HTTP traditionnelle. Nous pouvons done placer les 
instructions de traitement de la reponse immediatement apres 1' envoi de la requete. La 
premiere instruction de ce traitement permet d'affecter la reponse texte a une variable 
nominee nouveauGai n. Nous utilisons pour cela la propriete responseText de l'objet XHR. 

var nouveauGain = objetXHR. responseText; 

Nous arrivons maintenant au terme de la fonction du moteur Ajax. En effet, nous dispo- 
sons de la valeur de la reponse cote client, il ne nous reste plus qu'a l'affecter a la zone 
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resultat afin qu'elle remplace la valeur configured par defaut. Pour cela, nous utilise- 
rons la methode getEl ementBylcK ) qui permet de referencer l'element de la balise <span> 
par son identifiant resultat. Puis nous exploiterons la propriete innerHTML qui permettra 
de remplacer le contenu de l'element par la valeur 100 sauvegardee precedemment dans 
la variable nouveauGain. 

document. get El ementBylcK "resultat") .innerHTML=nouveauGain; 



Test du systeme 



Pour tester le systeme, vous devez commencer par ouvrir la page i ndex . html dans le Web 
Local avec le navigateur Firefox. Pour cela, plusieurs solutions s'offrent a vous. La 
premiere est la plus rapide mais necessite d'avoir configure le serveur d'evaluation dans 
la definition initiale du site Ajax (revoir si besoin le chapitre 7). Assurez-vous avant tout 
que Wamp5 est bien demarre (un icone en forme de demi cercle doit apparaitre dans la 
zone d'etat en bas a droite de l'ecran de votre ordinateur). 

Ouvrez la page a tester (index.html dans notre cas) dans Dreamweaver puis cliquez sur 
l'icone Apercu/debogage (bouton ayant la forme d'une planete bleue) situe dans le menu 
de l'editeur de fichier puis selectionnez Firefox dans la liste des navigateurs (par la suite, 
nous vous conseillons d'utiliser le raccourci clavier F12). Le navigateur Firefox doit 
alors s'ouvrir et afficher la page concernee. 

L autre solution est plus longue mais pourra etre utilisee dans tous les cas, meme si vous 
n'utilisez pas Dreamweaver ou si le serveur d'evaluation n'a pas encore ete configure. Derou- 
lez le menu du manager Wamp et selectionnez l'option 1 ocal host. La page d'accueil du 
Web Local de Wamp doit alors s'ouvrir dans le navigateur Firefox (prealablement confi- 
gure comme le navigateur par defaut dans la procedure d' installation de Wamp5). Dans 
la zone Vos projets cliquez sur le petit repertoire nomme SITEajax. La racine de notre site 
Ajax n'ayant pas de fichier d'index, la liste des fichiers et repertoires s'affiche dans la 
nouvelle page. Cliquez successivement sur les repertoires atelier, chap8 puis atelier8-l. 
La page i ndex . html doit alors s'ouvrir comme dans le cas de la premiere solution. 



Fonctionne uniquement sur Firefox 

L'exemple de cet atelier fonctionne uniquement sur le navigateur Firefox (ou les autres navigateurs compa- 
tibles avec I'objet XMLHttpRequest). Si toutefois vous desirez le faire fonctionner des maintenant avec 
Internet Explorer (version superieure a 5.0), il suffit de remplacer la syntaxe d'instanciation de I'objet XHR, 
soit actuellement new XMLHttpRequestt ), par celle-ci : new ActiveX0bject("MSXML2.XMLHttp"). 
Soyez rassure, nous presenterons plus loin le script a utiliser pour que vos applications puissent fonction- 
ner avec tous les types de navigateur. 



Nous pouvons remarquer dans la page index.html qui est maintenant affichee dans le 
navigateur que la valeur du gain est egale a 0. Si vous cliquez sur le bouton JOUER, vous 
declenchez alors la requete synchrone et la valeur du gain doit etre immediatement 
remplacee par celle du gain maximum stockee dans le fichier gainMax.txt (soit 100). 

L'interet de ces ateliers est surtout d'observer le fonctionnement du systeme afin de 
mieux comprendre les rouages du mecanisme d'une application Ajax et pour vous 
permettre par la suite de diagnostiquer un eventuel probleme et depanner une application 
plus complexe. Pour ces raisons nous allons activer l'extension Firebug a chaque test en 
cliquant sur l'icone place en bas et a droite du navigateur. 
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Comme nous l'avons deja vu dans le chapitre consacre a Firefox et a ses extensions, Fire- 
bug permet d'effectuer de multiples operations lors du test d'une application Ajax. Par 
exemple, si vous cliquez sur l'onglet HTML (voir repere 3 de la figure 8-3), vous pouvez 
afhcher le contenu des elements en memoire en deroulant successivement les differents 
elements de la page. Attention, il s'agit des contenus en memoire (representation du 
DOM sous forme de balises) et non d'un simple affichage du code initial de la page. 
Ainsi, dans notre cas, apres l'envoi de la requete, la valeur dans la zone de resultat est 
egale a 100 (voir repere 2 de la figure 8-3) et non a (valeur qui serait visible dans cette 
meme fenetre avant Taction sur le bouton JOUER ou dans le cas de 1' affichage du code 
source traditionnel d'une page). De plus si vous survolez avec votre souris l'un de ces 
elements dans la fenetre de Firebug, la zone correspondante dans l'ecran du navigateur 
est alors mise en evidence (voir repere 1 de la figure 8-3). 
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Figure 8-3 

Affichage du contenu des elements de la page HTML en memoire a Vaide Firebug 



Une autre fonctionnalite tres interessante de Firebug est de pouvoir observer les informa- 
tions echangees entre le navigateur et le serveur. Vous pouvez ainsi faire apparaitre tous 
les objets externes qui constituent votre page HTML (structure brute de la page HTML, 
images, feuille CSS, fichier JS externe...) lors de son appel initial et connaitre le temps 
de chargement de chacun des objets individuellement. Mais cela est encore plus interes- 
sant avec une application Ajax lors de l'envoi d'une requete car, si vous pouvez aussi 
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connaitre le temps de traitement de la requete, vous pouvez surtout afficher le contenu de 
la requete HTTP (et de tous ses en-tetes) ainsi que le contenu de la reponse HTTP corres- 
pondante. Pour cela, il faut cliquer sur l'onglet Net de Firebug (voir repere 1 de la figure 8-4) 
puis sur le bouton Clear (voir repere 2 de la figure 8-4) pour nettoyer les chargements 
precedents. Pour simuler le chargement initial de la page, nous allons cliquer sur le 
bouton de reactualisation de la page (voir repere 3 de la figure 8-4, ou plus simplement a 
l'aide du raccourci F5). Vous devriez voir apparaitre les deux objets constituant la page 
Web de notre exemple avec leurs temps de chargement respectifs, soient la structure 
brute de la page HTML et le chargement de 1' image placee en tete de notre page (voir 
repere 4 de la figure 8-4). 
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Figure 8-4 

Affichage des temps de chargement des objets constituant une page Web a I 'aide de Firebug 



Pour l'instant, nous n'avons pas encore declenche la requete Ajax. Si vous cliquez main- 
tenant sur le bouton JOUER (voir repere 1 de la figure 8-5), le fichier texte doit alors etre 
charge dans le navigateur et apparaitre a la suite de la liste des deux precedents objets de 
la page Web (voir repere 3 de la figure 8-5) et le resultat affiche dans la page doit prendre 
la valeur 100 (voir repere 2 de la figure 8-5). 

Comme nous vous l'avons annonce precedemment, Firebug permet aussi d' afficher le 
contenu de tous les en-tetes et le corps d'une reponse HTTP. Pour cela, cliquez sur le nom 
du fichier texte charge lors de la requete HTTP (gai nMax . txt, voir repere 1 de la figure 8-6). 
Une nouvelle zone doit alors apparaitre en dessous du nom du fichier (utilisez votre 
souris pour redimensionner la fenetre si besoin). Par defaut, c'est l'onglet des en-tetes qui 
doit etre actif (Headers, voir repere 2 de la figure 8-6) mais si vous cliquez sur le second 
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Affichage du temps de chargement dufichier texte lors de V envoi de la requete Ajax a I'aide de Firebug 

onglet (Response, voir repere 3 de la figure 8-6) vous pouvez alors voir le contenu du corps 
de la reponse (soit 100 dans notre exemple, voir repere 4 de la figure 8-6). 
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Une autre alternative pour observer les en-tetes et le corps de la reponse consiste a utiliser 
la console de Firebug. La console permet d' avoir un historique de toutes les erreurs 
JavaScript, CSS ou XML mais permet aussi de suivre les transferts HTTP generes par un 
objet XHR. Pour utiliser la console, cliquez sur l'onglet Console (voir repere 1 de la 
figure 8-7) puis sur la requete concernee. Vous pouvez ensuite passer de l'affichage des 
en-tetes au corps de la reponse en utilisant des onglets similaires a ceux utilises prece- 
demment avec la fonctionnalite Net (voir reperes 2 et 3 de la figure 8-7). Par exemple le 
repere 4 de la figure 8-7 illustre l'affichage des en-tetes de la reponse HTTP du fichier 
gainMax.txt. Si vous ne voyez pas apparaitre ces informations dans la console, assurez 
vous que cette fonctionnalite est cochee dans le menu des options situe en haut a droite 
de la fenetre (voir repere 5 de la figure 8-7). 
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La fonctionnalite permettant d' explorer le DOM de la page est aussi tres interessante a 
parcourir pour comprendre le fonctionnement d'une requete Ajax. En effet, 1' objet XHR 
etant desormais cree, il est visible dans le DOM de la page HTML et cela va nous 
permettre d'observer toutes les methodes et proprietes de cet objet. Pour acceder a ces 
informations, il suffit de cliquer sur l'onglet DOM de Firebug (voir repere 1 de la 
figure 8-8) puis de derouler 1' objet XHR en cliquant sur le petit plus qui precede son nom 
(objetXHR, voir repere 2 de la figure 8-8). Vous pouvez alors consulter les valeurs des 
differentes proprietes de 1' objet. L'evolution de certaines de ces valeurs, telles que 
readyState, status ou encore responseTxt, seront precieuses pour suivre les etapes et les 
resultats retournes par la reponse HTTP (voir repere 3 de la figure 8-8). 

Ce premier systeme fonctionne avec le mode synchrone de 1' objet XHR (ce mode est 
evidemment tres peu utilise dans les applications Ajax professionnelles). Pour simplifier 
le code, son usage est limite pour 1' instant au navigateur Firefox de meme qu'il est denue 
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de mise en forme puisque la structure des elements de la page HTML s'appuie sur une 
hierarchie de balises <div> sans style specifique. 



Figure 8-8 
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Nous remarquons aussi que le joueur gagne toujours le gain maximum (soit 100 euros). 
En effet, le fichier texte est statique et contient toujours la meme valeur. Cependant, nous 
pourrions imaginer que la valeur dans ce fichier puisse etre modifiee manuellement (ou 
par une interface d' administration en ligne) par l'administrateur du site et, dans ce cas, la 
valeur du gain serait differente d'une mise a jour a l'autre. 

L'interet de ce premier systeme est done son extreme simplicite qui vous a permis de 
creer rapidement votre premiere application Ajax (meme si dans ce cas, le A et le X du 
nom Aj ax ne sont pas j ustifies . . . ) en integrant un moteur Aj ax basique dans une page Web. 



Atelier 8-2 : requete synchrone sur un fichier texte 
avec une feuille de styles 

Composition du systeme 

Dans ce nouveau systeme, nous avons lie une feuille de styles externe afin de mettre en 
forme les differents conteneurs <div> de la page HTML. Nous profiterons de cette modi- 
fication pour demontrer que le fait d'ajouter des identifiants a chaque balise <di v> permet 
aussi de les manipuler dynamiquement avec JavaScript (rendre visible ou invisible, changer 
leur mise en forme. . .). 
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Cette structure est composee : 

• d'une page HTML (index.html) identique a celle de l'atelier precedent mais dans 
laquelle nous avons attribue un identifiant a chaque balise <div> et ajoute une instruction 
pour lier la page HTML a la feuille de styles ; 

• d'un simple fichier texte (gainMax.txt) identique au precedent ; 

• d'une feuille de styles (styl e . ess) dans laquelle nous avons defini les differents styles 
correspondant aux identifiants des balises <div>. 

Fonctionnement du systeme 

Le fonctionnement du systeme est semblable a celui de l'atelier precedent hormis le fait 
que la mise en forme des elements <di v> sera effectuee par une feuille de styles externe et 
que le message presentant la somme gagnee n'apparaitra a l'ecran que lorsque le resultat 
de la reponse HTTP sera disponible. 



Conception du systeme 

Nous allons commencer par modifier la page HTML en attribuant des identifiants speci- 
fiques a chaque balise <div>. Pour cela, ouvrez la page HTML precedente (index, html) et 
sauvegardez-la sous le meme nom dans un nouveau repertoire nomme /atelier8-2/ 
(profitez-en pour faire ensuite la meme operation avec le fichier gainMax.txt qui est lie a 
cette page). Ajoutez ensuite les differents attributs id et leur nom dans les balises <div> 
concernees avec l'editeur de Dreamweaver en mode code (voir code 8-1 et le repere 1 de 
la figure 8-9). 

Code 8-3 : 

<div id="page"> 
<!--zone du resultat--> 
<div id="info"> 

Bravo, vous avez gagne 

<span id="resul tat">0</span> 

euros 
</div> 

<!--zone du formulai re--> 
<div id="formulaire"> 
<form method="GET"> 

<input name="button" type="button" onCl ick="jouer( ) ; " value="JOUER" /> 
</form> 
</div> 
</div> 

Placez-vous ensuite dans la balise <head> de la page HTML et ajoutez la ligne de code ci- 
dessous (voir code 8-4 et le repere 2 de la figure 8-9) qui permettra de lier les identifiants 
precedemment ajoutes aux balises <div> avec la feuille de styles (style. ess) que nous 
allons creer ensuite. 



Code 8-4 : 

< 1 ink rel="stylesheet" type="text/css" href="style.css" 



/> 
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Figure 8-9 

Code de la page index.html apres I'ajout de la feuille de styles style. ess 

Creez une nouvelle feuille de styles avec Dreamweaver (depuis le menu Fichier>Nouveau, 
cliquez sur le bouton Pages vierges puis selectionnez CSS dans la liste proposee). Saisis- 
sez ensuite les differentes regies de style ci-dessous (voir code 8-5). Enregistrez la feuille 
de styles sous le nom styl e . ess dans le meme repertoire que la page HTML. 

Code 8-5 : 



body, hi, h2, p { font-size: lem; margin: 0; padding: 0; 
body { 
font-family: Verdana, Geneva, Arial, sans-serif; 
text-align: center; 
} 
#page { 

position: relative; 
margin: auto; 
width: 600px; 
height: 200px; 

border-top: medium solid #ff0000; 
border-bottom: medium solid #ff0000; 
} 

//info { 
position: absolute; 
left: lOOpx; 
top: 30px; 
} 
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#resultat { 

font-weight: bold; 
} 
#formulaire { 

position: absolute; 

left: 290px; 

top: lOOpx; 
} 

Les differentes regies de style permettront d'ameliorer la presentation de la page. Ainsi, 
la regie de style page permettra de creer un conteneur principal et d'afficher un trait rouge 
en haut et en bas de cette zone centrale pour bien la delimiter. Les regies de style info et 
formul ai re permettront de placer le bouton JOUER et la zone de resultat d'une maniere 
relative au conteneur page. Enfin, la regie de style resul tat permettra d'afficher le resultat 
place dans la balise <span> en gras pour bien le mettre en evidence. 



Ressources sur les CSS 

Pour plus d'informations sur les styles, reportez-vous au chapitre 17 de cet ouvrage. 



Apres avoir saisi et enregistre la feuille de styles, revenez a la page HTML et passez la 
fenetre du document en mode Creation (voir repere 1 de la figure 8-10). Si tout est 
correct, les styles devraient alors etre appliques a la page directement dans la fenetre 
document de Dreamweaver (voir figure 8-10). Vous pouvez aussi demander un apercu de 
la page dans le navigateur (a l'aide du bouton Apergu, voir repere 2 de la figure 8-10, ou 
plus simplement en utilisant le raccourci clavier F12) pour vous assurer que tous les 
styles fonctionnent aussi dans le navigateur. 



Figure 8-10 
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Nous allons maintenant modifier la regie de style de l'identifiant de la zone de resultat 
pour la rendre invisible lors du chargement initial de la page. Pour cela, ouvrez la feuille 
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de styles et ajoutez la directive visibility: hidden (a noter que nous aurions aussi pu 
utiliser la directive display: none) a la regie de style dont l'identifiant est info (voir 
code 8-6). Enregistrez ensuite votre feuille de styles et retournez dans la page HTML en 
mode Creation. La zone de resultat et son message doivent maintenant avoir disparu. 

Code 8-6 : 

#1nfo { 

position: absolute; 

left: lOOpx; 

top: 30px; 

visibility: hidden 
} 

II nous reste maintenant a ajouter l'instruction qui rendra visible la balise dont l'identi- 
fiant se nomme info des que la valeur du resultat sera connue. Pour cela nous allons 
manipuler le DOM en utilisant la methode getElementByldO pour referencer l'element 
de la balise <di v> a l'aide de son identifiant i nf o. Nous agirons ensuite sur cet element via la 
propriete styl e . vi si bi 1 i ty pour affecter a la propriete vi si bi 1 i ty sa nouvelle valeur visible 
qui, comme son nom l'indique, rendra visible l'element concerne (voir code 8-7). 

Code 8-7 : 



/* MOTEUR AJAX 

function jouerO { 

/* Config et envoi de la requete SYNCHRONE : 

objetXHR = new XMLHttpRequestt ) ; 
objetXHR. open ("get" , "gainMax.txt" , false) ; 
objetXHR. send(null ); 

/* Attente du retour SYNCHRONE : 

var nouveauGain = objetXHR. responseText; 
document. getElementByldC" resultat") .innerHTML=nouveauGain; 
document. get El ementBy Id ("info"). sty 1 e. vi sibi 1 i ty="visibl e" ; 
} 
/* FIN D u MOTEUR AJAX J 



Test du systeme 



Ouvrez la page index.html dans le navigateur Firefox en appuyant sur la touche F12 de 
Dreamweaver (ou avec la methode de votre choix, revoir la procedure de test de 1' atelier 
precedent). Cette fois, les elements doivent etre mis en page selon les parametres de la 
feuille de styles a laquelle ils sont lies et aucun message de resultat par defaut ne doit 
s'af richer au chargement de la page. Cliquez ensuite sur le bouton JOUER. Le resultat 
maximum accompagne de son message introductif doivent maintenant s'afhcher a 
l'ecran (voir repere 2 figure 8-11). 



Figure 8-11 

Test de la page HTML 
de V atelier 8-2. 
Le message du resultat 
(repere 2) doit s'afficher 
uniquement apres avoir 
appuye sur le bouton 
JOUER (repere 1). 
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Nous allons aussi profiter de ce test pour decouvrir les fonctionnalites que propose Fire- 
bug pour mettre au point une feuille de styles. Commencons par la fonctionnalite qui 
permet d'activer ou de desactiver certaines proprietes d'un style ou d'en modifier leur 
nom ou valeur. Pour cela, activez Firebug (cliquez sur le bouton vert en bas a droite du 
navigateur) et cliquez sur l'onglet CSS de la fenetre de Firebug (voir repere 1 de la 
figure 8-12). Si vous survolez les differentes proprietes avec la souris, vous pouvez 
observer qu'une icone d' interdiction grisee apparait a gauche de chaque propriete. Si 
vous cliquez sur l'une des proprietes, l'icone devient rouge et la propriete concernee est 
inhibee (voir le repere 2 de la figure 8-12 ou nous avons inhibe la propriete font-family 
de la balise <body>). De meme, dans cette fenetre, vous pouvez changer en direct les noms 
et valeurs de chaque propriete. II suffit pour cela de cliquer dessus et de saisir la nouvelle 
valeur, 1' incidence de votre modification sera instantanement reportee sur l'ecran du 
navigateur (pour tester cette fonctionnalite, essayez de changer la valeur de la propriete 
font-size du body par exemple). 



Figure 8-12 

Fonctionnalite 
de Firebug pour 
mettre au point 
une feuille de styles 
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Firebug permet aussi d'acceder aux memes fonctionnalites de gestion des styles depuis 
l'onglet HTML (les zones 4 et 5 de la figure 8-13 disposent des memes fonctionnalites que 
la fenetre CSS que nous venons de decrire). L'interet de passer par l'onglet HTML (voir 
repere 1 de la figure 8-13) est que le simple survol d'un element concerne par un style 
(voir repere 2 de la figure 8-13) dans la fenetre HTML affiche les proprietes du style corres- 
pondant (voir repere 4 de la figure 8-13) et les eventuels styles herites (voir repere 5 de la 
figure 8-13) dans la fenetre laterale et met en exergue la zone concernee dans l'ecran du 
navigateur (voir repere 3 de la figure 8-13). 
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Figure 8-13 

L'onglet HTML 
permet aussi 
d'acceder aux 
fonctionnalites 
de mise au point 
des styles. 




Atelier 8-3 : requete HTTP traditionnelle avec un traitement 
PHP et une feuille de styles 

Composition du systeme 

Nous desirons maintenant remedier au fait que la valeur retournee par la reponse est 
toujours la meme. Pour cela, nous devons adresser notre requete a un fichier PHP qui 
pourra renvoyer une valeur differente a Tissue de son traitement. S'agissant ici d'un jeu 
de hasard nous utiliserons une fonction de generation d'une valeur aleatoire pour definir 
la valeur du resultat du traitement. Cependant, plutot que de passer directement a une 
application Ajax dont l'objet XHR serait configure pour cibler un fichier PHP, nous 
avons trouve opportun de profiter de l'occasion pour vous presenter dans cet atelier ce 
que serait un systeme equivalent realise avec une requete HTTP traditionnelle. 

Cette structure est composee : 

• d'une page PHP (index. php) identique a la page HTML de l'atelier precedent mais 
dans laquelle nous avons remplace le moteur Ajax par un script PHP de traitement 
integre directement dans la zone de resultat ; 



d'une feuille de styles (style. ess) identique a la precedente. 
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Fonctionnement du systeme 

Dans ce systeme, le fonctionnement sera un peu different car nous ne chargerons pas 
initialement une page HTML contenant un moteur Ajax, mais un fichier contenant un 
script PHP destine a afficher le resultat du traitement directement dans la page lors de la 
soumission du formulaire. Le formulaire contenant le bouton JOUER devra done etre 
completement configure cette fois, afin d'indiquer que le fichier cible sera la page dans 
laquelle il se trouve. Ainsi, lorsque nous allons cliquer sur le bouton JOUER, une requete 
GET sera envoyee a la page dans laquelle nous nous trouvons. Le script PHP integre dans 
la zone de resultat devra ensuite detecter cette soumission et generer un traitement local 
pour definir le nouveau resultat et l'afficher dans la page. 

Conception du systeme 

Ouvrez la page HTML de l'atelier precedent (index.html) et sauvegardez-la sous le 
nouveau nom index. php (attention, il s'agit maintenant de l'extension .php et non plus 
.html) dans un nouveau repertoire nomme /atelier8-3/. Passez la fenetre du document 
en mode Code et supprimez 1' insertion JavaScript complete du moteur placee dans le 
haut de la page. Placez-vous ensuite dans la balise <form> puis supprimez le gestionnaire 
onclick="jouer();", ajoutez l'attribut method="get" et l'attribut action="index.php" afin 
d'indiquer que e'est la page courante qui devra receptionner la requete. Modifiez ensuite 
le type de la balise <input> avec type="submit" pour transformer le bouton JOUER en 
bouton de soumission du formulaire (voir code 8-8 et le repere 1 de la figure 8-14). 

Code 8-8 : 

i<form method="get" action="index.php"> 
<input name="button" type="submit" value="JOUER" /> 
</form> 

Placez-vous ensuite dans la balise resultat et selectionnez la valeur par defaut (0), puis 
remplacez cette valeur par le code PHP du code 8-9 ci-dessous (voir le repere 2 de la 
figure 8-14). 

Code 8-9 : 

<?php 
if(isset($_GET[ 'button'])) 
{ 

$resultat = rand(O.lOO); 
echo $resultat ; 
}else{ 

echo "0"; 
} 
?> 

La premiere ligne de ce script PHP permet de detecter si le formulaire a ete soumis. 

if (isset($_GET[ 'button'])) 

Pour cela, nous utilisons une structure de test if() et la fonction issetO appliquee a la 
variable $_GET[ ' button ' ] qui permet de verifier si 1' element de formulaire nomme button 
(soit le bouton JOUER) existe. Ainsi, le script qui suit ne sera execute que lorsque l'utili- 
sateur appuiera sur le bouton JOUER alors que lors du chargement initial de la page, 
e'est le script contenu dans la structure el se (soit l'instruction echo "0" ;) qui s'executera, 
affichant ainsi la valeur initiale a la place du montant du gain. 
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Dans le bloc conditionne par Taction sur le bouton JOUER, nous utiliserons la fonction 
rand( ) qui permet de calculer une valeur aleatoire (les deux parametres de la fonction indi- 
quent la plage possible du resultat, soit entre et 100). 

$resultit = rand(O.lOO); 

La valeur ainsi obtenue sera affectee a une variable nommee $resultat qui sera ensuite 
affichee dans la zone de resultat grace a la seconde ligne : 

echo $resultat; 

La structure else placee apres ce premier bloc permet d'afficher la valeur par defaut 
lors du chargement initial de la page PHP : 

|}else{ 
echo "0"; 
} 



Ressources sur le PHP 

Pour plus d'informations sur la syntaxe du PHP, reportez-vous au chapitre 21 de cet ouvrage. 
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Figure 8-14 

Modification de la page index.php 



Les modifications de la page index.php sont terminees. Avant les tests, il faut cependant 
modifier la feuille de styles styl e . ess afin d'indiquer que la zone resultat doit maintenant 
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etre affichee des le chargement initial de la page. Pour cela, nous allons modifier la valeur 
de la propriete vi si bi 1 i ty du style i nf o en lui affectant la valeur vi si bl e directement, au 
lieu de la valeur hidden qui avait ete configure dans l'atelier precedent (voir code 8-10). 

Code 8-10 : 

#1nfo { 

position: absolute; 

left: lOOpx; 

top: 30px; 

visibility: visible; 
} 



Test du systeme 



Ouvrez la page index. php dans le navigateur Firefox en appuyant sur la touche F12 de 
Dreamweaver. Activez Firebug (cliquez sur le bouton vert en bas du navigateur) et selec- 
tionnez la fonction Net (voir repere 1 de la figure 8-15). Dans la fenetre Net de Firebug, 
nous pouvons observer que les trois objets constituant la page Web sont charges correcte- 
ment (voir repere 2 de la figure 8-15) et apprecier le temps de chargement de chacun de 
ces elements. Nous constatons aussi que la valeur du resultat est bien initialisee a (voir 
repere 3 de la figure 8-15) et qu'aucun parametre n'est ajoute actuellement a l'URL de la 
page (voir repere 4 de la figure 8-15). 



Figure 8-15 

Test de la page 
index.php : charge- 
ment initial de la 
page 




Cliquez maintenant sur le bouton JOUER et observez bien la fenetre Net de Firebug. 
Vous devriez voir apparaitre ponctuellement un appel a la page index.php a la suite des 
objets deja charges qui demontre qu'une requete vers cette meme page a bien ete generee 
(voir repere 1 de la figure 8-16). Cette apparition est furtive car dans notre cas le serveur 
renvoie la page Web complete qui appellera sa feuille de styles des qu'elle sera chargee 
dans le navigateur, les deux nouveaux fichiers (la page index.php et la feuille de styles 
style. ess) remplacent done presque instantanement les fichiers precedemment charges. 
Observez au passage que 1' image ne sera pas rechargee car elle est desormais stockee 
dans le cache du navigateur. De meme, l'URL de la page est maintenant suivie du para- 
metre button envoye avec la methode GET lors de la soumission du formulaire (voir 



Applications Ajax-PHP synchrones 



Chapitre 8 



repere 2 de la figure 8-16). Enfin une valeur de gain aleatoire a pris place dans la zone de 
resultat et si vous renouvelez votre action sur le bouton JOUER, une valeur differente du 
gain doit s'afficher a chaque essai. 



Figure 8-16 

Test de la page 
index.php : envoi de 
la requite GET suite 
a une action sur le 
bouton JOUER 
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Si nous cliquons maintenant sur le petit + qui precede le nom du fichier index.php (voir 
repere 1 de la figure 8-17), nous pouvons voir cette fois qu'un onglet supplementary a 
pris place dans la partie qui s'affiche en dessous. II s'agit de l'onglet Params (voir 
repere 2 de la figure 8-17) qui nous permet de voir les parametres envoyes dans la requete. 
Dans notre exemple nous aurons le parametre button dont sa valeur sera egale a JOUER. 
Cliquons maintenant sur le troisieme onglet Response (voir repere 3 de la figure 8-17). 
L' information affichee par cet onglet est particulierement interessante car on constate ici 
que, contrairement aux autres ateliers Ajax, le corps de la reponse contient une page Web 
complete (voir repere 4 de la figure 8-17) et non pas uniquement la (ou les) donnee(s) 
necessaire(s) a la modification. 



Figure 8-17 
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index.php : 
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Pensez a activer Firebug pour vos tests 

Desormais nous ne reviendrons pas sur les fonctionnalites de Firebug deja presentees dans les ateliers prece- 
dents pour observer le fonctionnement du systeme, mais nous vous invitons evidemment a utiliser ces fonc- 
tionnalites tres interessantes pour mettre au point vos programmes et a activer Firebug a chacun de vos tests. 



Atelier 8-4 : requete synchrone sur un fichier PHP 
avec une feu i Me de styles 

Composition du systeme 

Nous allons maintenant nous interesser a la realisation d'un systeme equivalent a celui de 
1' atelier 8-3 mais realise cette fois avec un moteur Ajax synchrone. 

Cette structure est composee : 

• d'une page HTML (index.html), identique a celle de l'atelier 8-2, mais dans laquelle 
nous avons modifie le parametre de la methode open( ) de l'objet XHR qui cible, cette 
fois, un fichier PHP et non plus un simple fichier texte ; 

• d ' un nouveau fichier serveur PHP (serveur.php), dans lequel nous avons integre un script 
de traitement de la requete ; 

• d'une feuille de styles (styl e . ess) identique a la precedente. 

Fonctionnement du systeme 

Le fonctionnement du systeme est semblable a celui de l'atelier 8-2 realise precedem- 
ment hormis le fait que le resultat affiche sera different d'une requete a 1' autre. En effet, 
cette fois la requete cible un fichier PHP (gainAleatoire.php) generant une valeur alea- 
toire comprise entre et 100, et non plus un simple fichier texte (gainMax.txt) qui 
renvoyait la valeur 100 a chaque fois. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 8-2 (index.html) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /atel ier8-4/. Faites ensuite la meme operation avec 
la feuille de styles qui est liee a cette page (style. ess). Creez une nouvelle page PHP 
(depuis le menu Fichier>Nouveau cliquez sur le bouton Pages vierges puis selectionnez 
PHP dans la liste proposee) et enregistrez-la sous le nom gai nAl eatoi re . php dans le meme 
repertoire. Passez l'editeur du document en mode Code et supprimez tout le contenu 
HTML de la page puis saisissez a la place le script du code 8-11. 

Code 8-11 : 

<?php 

//indique que le type de la reponse renvoyee sera du texte 

header("Content-Type: text/plain") ; 

//simulation du temps d'attente du serveur (2 secondes) 

sleep(2); 

//calcul du nouveau gain entre et 100 euros 

$resultat = rand(0,100); 

//envoi de la reponse a la page HTML 

echo $resultat; 

?> 
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La premiere instruction permet de creer un en-tete qui precisera le type de contenu qui 
sera renvoye au navigateur, a savoir du texte. 

header("Content-Type: text/plain") ; 

La seconde ligne a ete ajoutee afin de simuler le temps de reponse du serveur en utilisant 
la fonction si eep( ) qui permet de mettre en « sommeil » le programme pendant le temps 
(en secondes) indique en parametre de la fonction (soit 2 secondes dans notre cas). En 
effet, comme nous realisons nos tests en local, les temps de transfert sont presque nuls, ce 
qui ne serait pas le cas si nous utilisions un script place sur un serveur distant. Comme 
nos tests portent sur des communications synchrones et asynchrones, il sera particulie- 
rement interessant de voir comment se comporte le navigateur pendant le temps de 
traitement, mais encore faut-il qu'il existe. 

sleep(2); 

La fonction utilisee pour calculer le montant des gains d'une maniere aleatoire a deja ete 
utilisee dans 1' atelier precedent. II s'agit de la fonction rand( ) configuree avec deux para- 
metres et 100 de sorte a preciser la plage dans laquelle se situe la valeur aleatoire a renvoyer. 
Ce montant aleatoire sera affecte a une variable $resultat qui sera ensuite affichee a l'ecran 
a l'aide de la fonction echo, derniere instruction du programme (voir figure 8-18). 

|$resultat = rand(O.lOO) ; 
echo $resultat; 
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Une fois le code saisi (n'oubliez pas de fermer la balise PHP : ?>), enregistrez votre fichier et 
revenez a la page HTML (index.html). Le contenu de ce fichier sera conserve en partie, la 
seule modification a effectuer concerne la methode open( ) de l'objet XHR dans laquelle il 
faudra remplacer le second parametre gainMax.txt par le nom du fichier contenant le script 
de generation du montant aleatoire que nous venons de realiser : gai nAl eatoi re . php. 

objetXHR. open ("get" , "gainAleatoire.php" , false) ; 

Une fois cette modification effectuee, enregistrez votre fichier. Le systeme est maintenant 
pret a etre teste. 
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Test du systeme 



Ouvrez la page index.html dans le navigateur Firefox en appuyant sur la touche F12 de 
Dreamweaver. Activez Firebug et selectionnez la fonction Net. Dans la fenetre Net de Fire- 
bug, nous pouvons observer que le chargement des trois objets (index.html, style. ess et 
logo, j pg) constituant la page Web s'est deroule correctement. Cliquez sur le bouton Clear 
de Firebug afin d'effacer ces informations. 

Nous allons maintenant cliquer sur le bouton JOUER pour emettre une requete 
synchrone vers le fichier serveur. La reponse du fichier serveur apparait alors dans la liste 
de Firebug (voir repere 1 de la figure 8-19). Nous pouvons constater que la fonction si eep( ) 
de simulation du temps de transfert a bien fonctionne car le temps de chargement indique 
a droite de cette premiere ligne est legerement superieur a 2 secondes (voir repere 2 de la 
figure 8-19). De meme, la valeur du gain affichee dans la zone de resultat repond a nos 
attentes puisqu'elle est comprise entre et 100 (voir repere 3 de la figure 8-19). 

II est interessant de remarquer que, pendant le temps d'attente de la reponse du serveur, 
l'utilisateur ne peut effectuer aucune action car le navigateur est bloque (appuyez de 
nouveau sur le bouton JOUER et essayez de selectionner le texte du message central pour 
vous en convaincre). Cela illustre tres bien l'un des inconvenients des communications 
synchrones que nous allons tenter de solutionner avec la communication asynchrone de 
1' atelier suivant. 

Nous pouvons aussi observer les en-tetes et le corps correspondants de la reponse. Pour 
cela cliquez sur le petit + qui precede le nom du fichier serveur, les en-tetes de la reponse 
apparaissent alors en dessous de cette ligne. Pour afficher le contenu du corps de la 
reponse, cliquez maintenant sur l'onglet Response (voir repere 4 de la figure 8-19). Vous 
pouvez alors verifier que la valeur de la reponse correspond bien a celle indiquee dans la 
zone de resultat de la page Web (voir repere 5 de la figure 8-19). 
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sans parametre 



Nous allons maintenant nous interesser aux applications Ajax-PHP asynchrones mais 
sans passage de parametre (du client vers le serveur) dans un premier temps. 

L' application utilisee pour ces ateliers sera une evolution de la machine a sous en ligne 
que nous avons deja utilisee dans le chapitre precedent. Ces differents ateliers nous 
permettront de decouvrir les problemes des communications asynchrones Ajax et 
comment les resoudre. 

Atelier 9-1 : requete asynchrone sur un fichier PHP 
avec une feuille de styles 

Composition du systeme 

Au cours de 1' atelier precedent, nous avons remarque la gene occasionnee par le blocage 
du navigateur pendant le traitement d'une requete synchrone. Nous allons maintenant 
resoudre ce probleme en vous presentant une application Ajax configuree en mode asyn- 
chrone. 

Cette structure est composee : 

• d'une page HTML (index.html) dont la structure sera semblable a l'atelier precedent 
mais dont le script du moteur Ajax sera adapte au fonctionnement asynchrone d'une 
requete ; 

• d'un fichier serveur PHP (gainAleatoire.php) identique a celui de l'atelier precedent ; 

• d'une feuille de styles (sty! e . ess) identique a celle de l'atelier precedent. 
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Fonctionnement du systeme 

Une fois la page i ndex. html chargee dans le navigateur, le bouton JOUER est affiche et le 
message du resultat est rendu invisible par la configuration initiale de la feuille de styles. 
Lorsque l'utilisateur clique sur le bouton JOUER, la fonction jouerO est appelee. Un 
objet XHR est alors cree puis configure en mode Asynchrone pour cibler le fichier 
serveur gainAleatoire.php. La requete est ensuite envoyee au serveur qui renverra une 
valeur aleatoire comprise entre et 100 en retour. Pendant le temps de traitement, l'utili- 
sateur peut continuer a utiliser le navigateur, contrairement a la requete synchrone que 
nous avons etudie dans l'atelier 8-4. A la reception de la reponse, le navigateur appelle la 
fonction de rappel actual i serPage( ). Celle-ci recuperera la valeur de la reponse et l'affec- 
tera a la zone resultat comme dans le cas de l'atelier 8-4. Enfin, la derniere instruction de 
la fonction de rappel permettra de rendre la zone de resultat de nouveau visible et d'afficher 
ainsi le montant du gain a l'ecran. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 8-4 precedent (index.html) et sauvegardez-la sous le 
meme nom dans un nouveau repertoire nomme /chap09/atelier9-l/. Copiez ensuite les 
autres fichiers de l'atelier precedent dans ce nouveau dossier. A noter que vous pouvez 
facilement faire des copier-coller de fichiers directement dans la fenetre Fichiers de 
Dreamweaver. II suffit pour cela de selectionner le fichier desire dans la liste de l'arbores- 
cence du site et de faire un clic droit puis de selectionner 1' option Edition puis Copier (ou 
plus rapidement, d'utiliser le raccourci clavier Ctrl + C). Placez-vous ensuite dans le 
repertoire de destination, cliquez droit et selectionnez cette fois Edition puis Coller (ou 
plus rapidement, utilisez le raccourci clavier Ctrl + V). 

Revenez a la page HTML et passez en mode Code. Localisez la ligne de la methode 
open( ) de l'objet XHR et modifiez le troisieme parametre de la fonction pour le remplacer 
par la valeur true. Avec cette nouvelle configuration, la requete sera maintenant effectuee 
en mode asynchrone. 

objetXHR. open ("get" , "gainAleatoire.php" , true) ; 

Contrairement a une requete synchrone pour laquelle les instructions de traitement de la 
reponse peuvent etre mis a la suite de 1' envoi de la requete, en mode asynchrone, il faut 
definir une fonction JavaScript qui prendra en charge ce traitement d'une maniere diffe- 
red lorsque la reponse sera renvoyee par le serveur. Le nom de la fonction de rappel doit 
etre memorise dans la propriete onreadystatechange de l'objet XHR avant l'envoi de la 
requete. Nous allons done ajouter la ligne d'instruction ci-dessous pour configurer cette 
propriete et indiquer que la fonction de rappel sera la fonction actual iserPage( ) (atten- 
tion a ne pas mettre de parentheses apres le nom de la fonction dans la ligne de code ci- 
dessous car nous desirons enregistrer la fonction et non le resultat qui pourrait etre 
retourne par cette fonction). 

objetXHR. onreadystatechange = actualiserPage; 

Les instructions de traitement de la reponse placees apres l'envoi de la requete doivent 
maintenant etre transferees de la fonction jouerO dans la nouvelle fonction de rappel 
nominee actual iserPageO que nous allons definir ensuite. La nouvelle fonction jouerO, 
apres modification, correspond desormais au code 9-1 ci-apres. 
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Code 9-1 : 

function jouerO ( 

// Creation d'une requete uniquetnent pour Firefox 

objetXHR = new XMLHttpRequest( ) ; 

// Configuration de la requete GET et Asynchrone 

objetXHR. open ("get" , "gainAleatoi re.php" , true) ; 

// Designation de la fonction de rappel 

objetXHR. onreadystatechange = actualiserPage; 

// Envoi de la requete 

objetXHR.send(null); 
} 

Nous allons maintenant definir le traitement effectue par la fonction de rappel actual i- 
serPageO. Cette fonction etant executee a chaque changement de l'objet XHR, nous 
allons pouvoir l'utiliser pour effectuer le traitement des resultats du serveur. Nous allons 
done inserer dans cette fonction les instructions de traitement de la reponse que nous 
avons precedemment supprimees de la fonction jouer( ). Le code de la fonction de rappel 
actual i serPage( ) doit done correspondre au code 9-2 ci-dessous : 

Code 9-2 : 

function actualiserPage( ) { 

// Recuperation du resulat renvoye par le serveur 
var nouveauGain = objetXHR. responseText; 
// Affecte le nouveau gain a la zone resultat 
document. get El ementBy Id ( "resultat") . innerHTML=nouveauGain; 
// Affiche le nouveau message a 1'ecran 
document .get El ementBy Id( "info") .style. vi si bil ity=" visible" ; 
} 

Les modifications de la page index.html sont maintenant terminees, il ne vous reste plus 
qu'a enregistrer la page et la tester dans le navigateur. 
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Figure 9-1 

Configuration d'un moteur Ajax asynchrone 
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Test du systeme 



Ouvrez la page index.html dans le navigateur Firefox en appuyant sur la touche F12 de 
Dreamweaver. Activez Firebug et selectionnez l'onglet Net. Dans la fenetre Net de Fire- 
bug, nous pouvons observer que le chargement des trois objets (index.html, style. ess et 
logo.jpg) constituant la page Web s'estderoulecorrectement. Cliquez sur le bouton Clear 
de Firebug afin d'effacer ces informations. 

Nous allons maintenant cliquer sur le bouton JOUER pour emettre notre premiere 
requete asynchrone vers le fichier serveur. Des que la requete est declenchee, le nom du 
fichier serveur apparait dans la liste de l'onglet Net de Firebug (voir repere 1 de la 
figure 9-2) et une petite animation est lancee pour indiquer que le traitement est en cours 
(voir repere 2 de la figure 9-2). Pendant l'attente de la reponse, nous pouvons constater 
cette fois que le navigateur n'est pas bloque. Pour vous en convaincre, verifiez qu'il est 
toujours possible de selectionner le texte des commentaires situes en bas de l'ecran du 
navigateur avec votre souris (voir repere 3 de la figure 9-2). En revanche, nous pouvons 
remarquer que le message du resultat s'affiche des 1' envoi de la requete alors que la 
valeur du gain n'est pas encore connue (voir repere 4 de la figure 9-2). II faut ensuite 
attendre la fin du traitement pour que le gain s'affiche dans ce meme message. 
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Ce probleme est lie au fait que la fonction de rappel actual iserPageO est appelee a 
chaque changement de l'objet XHR. Or celui-ci change quatre fois dans un cycle de 
communication HTTP (revoir si besoin le chapitre 4 sur l'objet XHR) dont la premiere 
fois juste apres la configuration de l'objet avec la methode open( ) ce qui explique que le 
message s'affiche des que nous appuyons sur le bouton JOUER. Heureusement, l'objet 
XHR met a notre disposition la propriete readyState qui permet de connaitre l'etape du 
cycle de communication HTTP. 

Pour bien comprendre son fonctionnement, nous allons utiliser la console de Firebug 
pour suivre l'etat de cette propriete au fil du processus de communication. Rappelons 
que la console permet d'eviter d'utiliser les traditionnels alertO pour deboguer un 
programme. Contrairement aux fenetres alertO qui s'affichent a l'ecran et bloquent le 
fonctionnement, l'utilisation de la console permet de capturer des informations et de les 
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visualiser dans une fenetre de Firebug sans perturber le deroulement de 1' application. 
Pour cela, nous allons ajouter une methode infoO de l'objet console afin d'afficher les 
differents etats de readyState et la valeur de la reponse (responseTxt) a ce meme moment 
dans la console de Firebug. Ouvrez le fichier index.html en mode Code et ajoutez dans la 
fonction de rappel la ligne de code en gras dans le code 9-3. 

Code 9-3 : 



function actual iserPage( ) { 

// AFFICHAGE INFO DANS LA CONSOLE 

console. info( 'Etat de readyState : '+objetXHR.readyState+' 
■*: '+objetXHR.responseText) ; 

/7 



Valeur de responseText 



var nouveauGain = objetXHR. responseText ; 
document. getElementById( "resul tat") . innerHTML=nouveauGain; 
document .get El ementById( "info") .style.visibil ity=" visible" ; 
} 

Testons maintenant notre systeme. Pour cela, appuyez sur la touche F12 pour lancer la 
page index, html dans le navigateur. Activez Firebug et cliquez sur l'onglet Console (voir 
repere 1 de la figure 9-3). Appuyez ensuite sur le bouton JOUER pour lancer la requete et 
observez la fenetre de la console. A chaque changement d'etat de la propriete readyState, 
la fonction de rappel sera appelee et affichera une ligne d' information en rapport. A la fin 
du cycle, nous remarquons que la propriete readyState a change quatre fois d'etat et que 
la valeur du resultat n'est disponible qu'a partir de l'etat 3 de readyState. En pratique, 
nous utiliserons toujours l'etat 4 de readyState pour declencher le traitement de la 
reponse car l'etat 3 correspond a une reception en cours (revoir tableau 3-6 pour 
memoire) et ne nous assure pas que toutes les informations de la reponse soient bien 
receptionnees selon la taille et le format de la reponse. 
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Nos tests sont termines, nous verrons comment exploiter cette propriete readyState pour 
eviter ce probleme dans le prochain atelier. 
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Atelier 9-2 : requete asynchrone avec controle de la propriete 
readyState 

Composition du systeme 

Dans 1' atelier precedent, nous avons remarque qu'avec une communication asynchrone Ajax, 
la fonction de rappel etait appelee a chaque changement d'etat de l'objet XHR. Nous avons 
aussi analyse revolution de la propriete readyState de l'objet qui permet de connaitre 
l'etat de la communication. Nous allons maintenant solutionner ce probleme en modi- 
fiant le code de la fonction de rappel en y integrant un test qui permettra de s'assurer que 
la valeur de readyState est bien 4 avant d'executer les instructions de traitement du resultat. 

Cette structure est composee : 

• d'une page HTML (index.html) dont la structure sera identique a celle de 1' atelier 
precedent mais dont le code de la fonction de rappel sera modifie ; 

• d'un fichier serveur PHP (gainAleatoire.php) identique a celui de 1' atelier precedent ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier precedent. 

Fonctionnement du systeme 

Le fonctionnement sera semblable a celui de l'atelier precedent hormis le fait que le 
message indiquant le nouveau gain ne s'affichera que lorsque le resultat sera disponible 
dans le navigateur. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 9-1 (index.html) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /atelier-9-2/. Copiez ensuite les autres fichiers de 
l'atelier precedent dans ce nouveau dossier. 

Revenez a la page HTML et passez en mode Code. Localisez la ligne de la fonction de 
rappel actual i serPage( ) et inserez une structure de test i f ( ) pour conditionner les instruc- 
tions contenues dans la fonction selon l'etat de la propriete readyState de l'objet XHR. 
La nouvelle fonction actual iserPageO, apres modification, correspond desormais au 
code 9-4 ci-dessous. A noter que nous avons conserve l'instruction d'appel de la console 
dans le corps de la fonction (voir zone "AFFICHAGE INFO DANS LA CONSOLE" 
dans le code 9-4). Vous pourrez evidemment supprimer ou commenter cette partie de 
code apres avoir constate que le bloc ainsi conditionne ne sera desormais appele que pour 
l'etat 4 de la propriete readyState. 

Code 9-4 : 

function actual iserPaget ) { 
if (objetXHR. readyState == 4) { 
// AFFICHAGE INFO DANS LA CONSOLE 

console. info( 'Etat de readyState : '+objetXHR.readyState+' - Valeur de responseText 

**: "+objetXHR. responseText) ; 
// 

var nouveauGain = objetXHR. responseText; 
document. get El ementBy Id ("resultat") . innerHTML=nouveauGain; 
document. get Element By Id ( "info") .style. vis ibil ity=" visible" ; 
} 
} 
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Les modifications de la page index.html sont maintenant terminees, il ne vous reste plus 
qu'a enregistrer la page et a la tester dans le navigate ur. 



Test du systeme 



Ouvrez la page 1 ndex . html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Activez Firebug et selectionnez l'onglet Console (voir repere 1 de la 
figure 9-4). 

Cliquez sur le bouton JOUER pour emettre la requete asynchrone vers le fichier serveur. 
Une fois que la reponse du serveur est receptionnee par le navigateur, une information est 
affichee dans la console precisant que l'etat de readyState est egal a 4 et que la valeur 
responseTxt est maintenant connue (voir repere 2 de la figure 9-4). D'autre part, nous 
pouvons constater que, desormais, le message du resultat et la nouvelle valeur de gain ne 
s'affiche dans la zone de resultat qu'au terme de la communication asynchrone (voir 
repere 3 de la figure 9-4). 
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Le systeme semble fonctionner correctement mais voyons maintenant, ce qui se passera 
si un probleme reseau survient lors de la communication avec le serveur. Pour cela, nous 
allons modifier le nom du fichier PHP cible par la requete (par exemple, remplacez le 
nom du fichier PHP actuel par gainAleatoire2.php dans la methode openO du moteur 
Ajax). Une fois la modification effectuee, essayez de nouveau votre systeme en appuyant 
sur F12 puis en cliquant sur le bouton JOUER. Vous constatez que le systeme ne fonc- 
tionne evidemment plus et que le message affiche a la place de la valeur est plutot alarmant 
pour l'utilisateur (voir repere 5 de la figure 9-5). Cependant, dans d'autres circonstances, 
qui peuvent varier selon la configuration de votre serveur, la situation pourrait etre encore 
pire si vous n'aviez aucun message car l'utilisateur attendrait desesperement la reponse 
du serveur. 
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Pour analyser le probleme, cliquez sur l'onglet DOM (voir repere 2 de la figure 9-5) de 
Firebug et developpez l'objet XHR de l'arbre DOM (voir repere 1 de la figure 9-5). Cette 
vue nous permet de connaitre toutes les valeurs des differentes proprietes de l'objet 
XHR. En l'occurrence, nous pouvons observer que la valeur de la propriete status de 
l'objet XHR correspondant a la valeur du statut HTTP retournee lors de la reponse 
(revoir si besoin le tableau 3-1 pour connaitre les differentes valeurs possibles de ce para- 
metre) n'est pas egale a 200 comme d'habitude lorsque la communication se deroule 
bien, mais a 404 (cette valeur correspond a une erreur serveur lorsque le fichier cible est 
introuvable (voir repere 4 de la figure 9-5)). De meme, nous pouvons constater que la 
reponse retournee par le serveur n'est pas une valeur comprise entre et 100 mais le code 
HTML complet d'une page web signalant une erreur 404 (voir repere 3 de la figure 9-5). 



Figure 9-5 
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Nos tests sont a present termines. Nous avons constate qu'en cas d' erreur du serveur, 
l'application se bloque et affiche un message alarmant (ou n'affiche rien du tout selon le 
contexte) dans 1' interface utilisateur et renvoie un statut HTTP different de 200 dans la 
propriete du meme nom de l'objet XHR (status). Pour eviter ce probleme, nous verrons 
comment exploiter la propriete status dans le prochain atelier. 



Atelier 9-3 
status 



requete asynchrone avec controle de la propriete 



Composition du systeme 

Dans 1' atelier precedent, nous avons remarque que les erreurs serveur n'etaient pas 
controlees par le moteur Ajax. Nous allons voir maintenant comment remedier a ce 
probleme. 



Applications Ajax-PHP sans parametre 



Chapitre 9 

Cette structure est composee : 

• d'une page HTML (i ndex . html ) dont la structure sera identique mais dont le code de la 
fonction de rappel sera modifie ; 

• d'unfichier serveur PHP (gainAleatoire.php) identique a celui de 1' atelier precedent ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier precedent. 

Fonctionnement du systeme 

Pour le fonctionnement du systeme de cet atelier, nous conserverons notre situation 
d'erreur serveur afin de voir comment la controler (le fichier cible sera done encore 
modifie afin qu'il soit introuvable). Une fois la modification effectuee, si nous testons 
l'application en appuyant sur le bouton JOUER, il n'y aura plus de message d'erreur 
mais le message habituel d'affichage du montant du gain sera remplace par un avertissement 
signalant une erreur serveur en precisant le statut correspondant au probleme. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 9-2 precedent (index.html) et sauvegardez-la sous le 
meme nom dans un nouveau repertoire nomme /atelier9-3/. Copiez ensuite les autres 
fichiers de l'atelier precedent dans ce nouveau dossier. 

Revenez a la page HTML et passez en mode Code. Localisez la fonction de rappel actua- 
liserPageO et inserez une seconde structure de test if() endessous de la precedente pour 
conditionner les instructions contenues dans la fonction selon l'etat de la propriete status 
de l'objet XHR. 

| if (objetXHR. status == 200) { 

Ce premier test permettra dorenavant d'eviter que le traitement normal de la reponse soit 
execute en cas d'erreur serveur. Cependant, si nous desirons afficher un message dans 
l'interface pour avertir l'utilisateur du probleme, il faut alors ajouter une structure el se a 
la fin du bloc conditionne de sorte a programmer les instructions a executer en cas 
d'erreur. Dans notre cas, nous allons remplacer le message contenu dans la balise <div> 
dont l'identifiant est i nf o par un message informant de 1' erreur serveur. Pour realiser cela 
nous utiliserons l'attribut innerHTML associe a la methode getElementByldO qui permettra 
de recuperer l'element info concerne. Le message d'erreur sera, quant a lui, compose 
d'un texte (Erreur serveur :) auquel on ajoutera le code du statut et sa signification a 
l'aide des proprietes de l'objet XHR disponibles (soient status et statusText qui seront 
egaux respectivement a 404 et a Not Found dans notre exemple). A la suite de ces instruc- 
tions, nous ajouterons aussi la methode abortO de l'objet XHR afin de le supprimer en 
cas d'erreur serveur. 

La nouvelle fonction actual iserPageO apres modification correspond desormais au 
code 9-5 ci-dessous. 

Code 9-5 : 

function actual iserPage( ) { 
if (objetXHR. readyState == 4) { 
if (objetXHR. status == 200) { 

var nouveauGain = objetXHR. responseText; 

document. get Element By Id ("resul tat" ) .innerHTML=nouveauGain; 
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document. getElementBylcK "info") .style.visibil ity=" visible" ; 
}else{ 

// Message d'erreur 

document. getElementById("info").innerHTML="Erreur serveur : 

*»"+objetXHR.status+" - "+ objetXHR.statusText; 

document. get Element By Id ( "info" ) .style.visibil ity=" visible" ; 

// Annule la requete en cours 

objetXHR.abortO; 

objetXHR=null; 
} 
} 

Les modifications de la page index.html sont maintenant terminees, il ne vous reste plus 
qu'a enregistrer la page et a la tester dans le navigateur. 



Test du systeme 



Ouvrez la page i ndex. html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Cliquez sur le bouton JOUER pour declencher 1' envoi de la requete asyn- 
chrone vers le fichier errone. Des que le serveur renvoie son statut erreur (404 dans notre 
cas), un message informant de 1' erreur serveur et de sa nature est affiche a la place du 
message de resultat habituel (voir repere 1 de la figure 9-6). 
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Figure 9-6 

Test d'une erreur serveur avec controle de status 



Retournez dans Dreamweaver pour corriger le probleme en remplacant le nom du fichier 
serveur errone par le nom initial (gai nAl eatoi re . php) puis testez de nouveau la page dans 
le navigateur pour vous assurer que tout est rentre dans l'ordre. 

Le systeme semble de nouveau fonctionner correctement mais il subsiste encore un 
probleme quant a l'utilisation de la machine a sous. En effet, entre le moment ou l'utili- 
sateur clique sur le bouton JOUER et l'affichage du nouveau gain, l'utilisateur n'est pas 
du tout informe qu'un traitement est en cours. Depuis nos multiples essais, nous 
sommes desormais habitues au fonctionnement de 1' application, mais imaginez qu'un 
nouvel internaute utilise la machine pour la premiere fois, cela peut etre tres destabilisant 
pour lui ! 
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Par ailleurs, l'utilisateur, inquiet de ne rien voir apparaitre pendant ce temps d'attente, peut 
cliquer de multiples fois sur le bouton JOUER (car avec une communication asynchrone, 
les fonctionnalites du navigateur ne sont pas bloquees pendant le traitement de la 
requete). Bien evidemment, ce comportement n'accelerera pas le traitement de sa 
demande. II va d'une part surcharger le serveur et le reseau inutilement mais d' autre part, 
il risque surtout de saturer le navigateur, voire de le bloquer dans le cas de requetes volu- 
mineuses a traiter. Par consequent, en ce qui concerne des requetes faisant appel a un 
meme script serveur, il est preferable de ne soumettre qu'une requete a la fois (meme si 
techniquement le navigateur peut gerer plusieurs requetes en parallele). Aussi, pour 
eviter ces problemes, nous verrons dans l'atelier suivant comment bloquer l'utilisation du 
bouton JOUER et mettre en place un indicateur de traitement pour informer l'utilisateur. 

Atelier 9-4 : requete asynchrone avec indicateur de traitement 
et controle du bouton 

Composition du systeme 

Dans l'atelier precedent, nous avons remarque qu'aucune information ne permettait a 
l'utilisateur de la machine a sous de savoir si le traitement etait en cours ou non et que le 
bouton JOUER etait toujours actif pendant ce temps. Nous allons remedier a ces 
problemes dans cet atelier en controlant le bouton JOUER et en integrant un indicateur 
de chargement graphique. 

Cette structure est composee : 

• d'une page HTML (index.html) dont la structure sera identique a celle de l'atelier 
precedent mais dont le code du moteur Ajax sera modifie ; 

• d'un fichier serveur PHP (gainAleatoire.php) identique a celui de l'atelier precedent ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier precedent ; 

• d'une nouvelle animation indiquant que le traitement est en cours (cha rgeur . gi f). 

Fonctionnement du systeme 

Le fonctionnement de ce systeme est semblable a celui de l'atelier precedent (une fois 
l'erreur sur le nom du fichier serveur corrigee evidemment) hormis le fait que le bouton 
JOUER sera bloque pendant la periode de la communication HTTP et qu'une anima- 
tion apparaitra pendant cette meme periode pour signaler que le traitement est en 
cours. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 9-3 precedent (index.html) et sauvegardez-la sous le 
meme nom dans un nouveau repertoire nomme /atel1er9-4/. Copiez ensuite les autres 
fichiers de l'atelier precedent dans ce nouveau dossier. 

Revenez a la page HTML et passez en mode Code. Nous allons commencer par ajouter 
1' animation qui signalera le traitement en cours dans la page. Pour cela, copiez dans le 
meme repertoire un fichier GIF de votre choix et nommez-le chargeur . gi f . Vous pouvez aussi 
telecharger celui qui a ete utilise pour notre exemple sur l'extension de ce livre a l'adresse 
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www.editions-eyrolles.com ou encore obtenir d'autres animations de chargement sur 
Internet (voir l'encadre ci-apres). Ajoutez ensuite dans la page HTML le code permettant 
d'afficher cette animation et assurez-vous par la meme occasion que l'identifiant du 
bouton est bien renseigne (voir code 9-6). 

Code 9-6 : 

<div id="page"> 

<!--Zone du resultat--> 

<div id="info">Bravo, vous avez gagne <span id="resul tat">0</span> Euros</div> 

<!--Zone du chargeui — > 

<img id="charge" src="chirgeur.gif" /> 

<!--Zone du formulai re--> 

<div id="formulai re"> 

<form method="GET"> 
<input name="button" id="button" type="button" onClick="jouer( ) ;" value="JOUER" /> 

</form> 

</div> 
</div> 



Obtenir d'autres animations pour signaler le traitement 

Si vous desirez obtenir d'autres animations GIF pour les inserer dans vos futures applications Ajax, il suffit 
de vous rendre a I'adresse suivante pour telecharger celle qui correspondra le mieux a vos besoins : 
http://ajaxl oad.info 



Ouvrez la feuille de styles (style. ess) pour definir le style qui permettra de positionner 
1' animation dans la page et de le rendre invisible par defaut. Ajoutez pour cela une 
nouvelle regie de style charge a la suite des autres regies deja presentes dans ce fichier 
(voir code 9-7). 

Code 9-7 : 

#charge { 

position: absolute; 

left: 310px; 

top: 50px; 

visibility: hidden 
} 

Revenez dans la page HTML, localisez ensuite la fonction de rappel jouer( ) et inserez les 
deux lignes de code qui permettront de neutraliser le bouton et d'afficher 1' animation 
juste avant l'appel de la methode send( ) de l'objet XHR (voir code 9-8). Dans ces deux 
instructions, nous utiliserons la methode getEl ementById( ) qui permet de referencer direc- 
tement l'element passe en parametre. Nous associerons ensuite aux elements ainsi refe- 
rences les proprietes que nous desirons modifier (disabled pour l'element button et 
style. visibility pour l'element charge). Nous pourrons ainsi facilement affecter a ces 
proprietes les valeurs adaptees pour neutraliser le bouton disabled=true et afheher 
l'animation vi si bi 1 i ty = "vi si bl e" (voir code 9-8). 

Code 9-8 : 

function jouerO { 

/* Configuration et envoi de la requete ASYNCHRONE */ 

objetXHR = new XMLHttpRequest( ) ; 

ob jet XHR. open ("get" , "gainAleatoi re.php" , true) ; 
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objetXHR.onreadystatechange = actualiserPage; 

// Gestion du bouton et du chargeur 

document . getEl ementBy Id ( "button" ) . di sabl ed= true ; 

document. getElementBy Id ("charge") .style.visibility="visible"; 

// Envoi de la requete 

objetXHR.send(nul 1 ) ; // Envoi de la requete 

/* */ 

} 

Nous allons maintenant ajouter dans la fonction de rappel actual 1 serPage( ) deux instruc- 
tions inverses qui permettront de retablir l'etat actif du bouton JOUER et de rendre invi- 
sible l'animation des la fin de la communication. Ces instructions sont identiques a celles 
de la fonction jouer( ) hormis qu'ici nous affecterons la valeur fal se a la propriete disa- 
bled du bouton pour le rendre de nouveau actif et la valeur hidden a la propriete visibi- 
lity du style de l'animation de chargement. A noter que nous devons aussi ajouter ces 
memes instructions dans le bloc el se qui gere le message d'erreur serveur arm de retablir 
l'etat initial du bouton et supprimer le chargeur en cas d'erreur serveur (voir code 9-9). 

Code 9-9 : 

function actual iserPage( ) { 
if (objetXHR.readyState == 4) ( 
if (objetXHR. status == 200) { 

var nouveauGain = objetXHR. responseText; 

document. get El ementBy Id ("resul tat") . innerHTML=nouveauGain; 

document. getEl ementBy Id( "info") . style. vis ibil ity=" visible" ; 

// Gestion du bouton et du chargement 

document. getEl ementBy Id( "button" ).di sabl ed= false; 

document. getEl ementBy Id( "charge"). sty le.vi si bility="hidden"; 
)else{ 

// Message d'erreur serveur 

document. getEl ementBy Id( "info") .innerHTML="Erreur serveur : 

>*"+objetXHR.status+" - "+ objetXHR. statusText; 

document. getEl ementBy Id( "info") .style. vis ibil ity=" visible" ; 

// Gestion du bouton et du chargeur 

document. getEl ementBy Id( "button" ).di sabl ed= false; 

document. getEl ementBy Id( "charge"). sty le.vi si bility="hidden"; 

// Annule la requete en cours 

objetXHR.abortO; 

objetXHR=null ; 
} 
} 

} 

Les modifications de la page index.html sont maintenant terminees, il ne vous reste plus 
qu'a enregistrer la page et a la tester dans le navigate ur. 



Test du systeme 



Ouvrez la page index, html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Cliquez sur le bouton JOUER pour declencher l'envoi de la requete asyn- 
chrone et verifiez que le bouton devient bien inactif (voir repere 1 de la figure 9-7) 
pendant le temps d'attente de la reponse et qu'une animation apparait (voir repere 2 de la 
figure 9-7) pour vous indiquer que le traitement est en cours. 
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Le systeme fonctionne desormais correctement dans le navigateur Firefox mais nous ne 
l'avons pas encore teste dans Internet Explorer. Pour cela vous avez deux alternatives, 
utiliser 1' extension IE Tab de Firefox (qui permet de simuler le fonctionnement de IE 
dans Firefox) ou utiliser directement un navigateur Internet Explorer externe. Si vous 
desirez utiliser la premiere alternative, il suffit de cliquer sur le petit bouton avec l'icone 
Firefox en bas a droite de votre navigateur (pour disposer de ce bouton, il faut bien 
evidemment avoir installe prealablement 1' extension IE Tab, revoir si besoin le chapi- 
tre 5). Le bouton est alors remplace par celui de IE afin de vous rappeler que votre navi- 
gateur simule desormais son fonctionnement. Pour tester votre programme directement 
dans un veritable navigateur Internet Explorer, nous vous invitons a utiliser le bouton 
Apercu/Debogage de Dreamweaver puis a selectionner l'option Apercu dans Explore 
place en seconde place apres Firefox dans la liste de choix (le bouton Apercu/Debogage 
a la forme d'une plane te bleue et se trouve dans la barre de menus de l'editeur de docu- 
ment de Dreamweaver). Evidemment, en dernier recours, vous avez aussi la possibility 
de copier l'adresse de la page a tester depuis la barre d'adresse de Firefox et a la coller 
dans celle du navigateur IE. 




Atelier 9-4 




Figure 9-7 

Test du systeme avec blocage du bouton et affichage de V animation de traitement 



Pour nos premiers tests, nous utiliserons l'apercu dans le navigateur IE mais quelle que 
soit la solution choisie, vous remarquerez que lorsque vous appuierez sur le bouton 
JOUER, une erreur JavaScript sera generee vous indiquant que l'objet XHR est indefini 
(voir figure 9-8). Pour afficher les details de l'erreur, cliquez sur le petit triangle jaune qui 
doit apparaitre en bas du navigateur IE (voir repere 1 de la figure 9-8) puis sur le bouton 
Details de la boite de dialogue (voir repere 2 de la figure 9-8). 

Ce comportement n'est pas surprenant puisque nous avons vu dans le chapitre 4 consacre 
a l'objet XHR que Internet Explorer necessite une syntaxe differente de celle de Firefox 
pour creer l'objet XHR (revoir le tableau 3-3 si besoin). Le prochain atelier sera done 
consacre a la mise en ceuvre d'une solution pour pouvoir creer un objet XHR qui fonc- 
tionne quel que soit le navigateur utilise. 
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Figure 9-8 

Test du systeme dans Internet Explorer 

Atelier 9-5 : requete asynchrone avec une fonction universelle 
de creation d'objet XHR 

Composition du systeme 

Dans 1' atelier precedent nous avons remarque que le systeme ne fonctionnait pas avec 
Internet Explorer. Nous proposons de remedier a ce probleme dans le present atelier en 
ajoutant une fonction universelle pour la creation de l'objet XHR. 

Cette structure est composee : 

• d'une page HTML (index.html) dont la structure sera identique a celle de 1' atelier 
precedent mais dont le code du moteur Ajax sera modifie ; 

• d'un fichier serveur PHP (gainAleatoire.php) identique a celui de 1' atelier precedent ; 

• d'une feuille de styles (styl e . ess) identique a celle de 1' atelier precedent ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement de ce systeme est identique a celui de 1' atelier precedent hormis le fait 
qu'il pourra etre execute sur tous types de navigateurs (ou presque . . .). 



Conception du systeme 

Ouvrez la page HTML de 1' atelier 9-4 (index.html) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /atel1er9-5/. Copiez ensuite les autres fichiers de 
1' atelier precedent dans ce nouveau dossier. 

Revenir a la page HTML et passez en mode Code. Nous allons commencer par ajouter 
une nouvelle fonction creationXHRO qui permettra de creer un objet XHR sur tous les 
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navigateurs courants (version 5.0 d'Internet Explorer comprise). Cette fonction s'appuie 
sur une structure d' interception d'exceptions (try-catch, pour plus d' informations sur le 
fonctionnement de cette structure, reportez-vous aux chapitres des Ressources et plus 
particulierement a celui sur la technologie JavaScript a la fin de cet ouvrage). Cette struc- 
ture permettra de tester successivement la creation d'un objet XHR selon les differentes 
syntaxes compatibles avec les navigateurs usuels. Des qu'une des syntaxes s'execute 
correctement, l'objet ainsi cree est sauvegarde dans la variable resultat qui est elle- 
meme retournee a la fonction appelante a l'aide du mot-cle return. Si aucune syntaxe ne 
fonctionne, la fonction retourne alors l'etat nul 1 . 

Saisissez le code de cette fonction (voir code 9-10) a la suite des deux autres fonctions 
JavaScript du moteur Ajax. 
Code 9-10: 



function creitionXHR( ) { 
var resultat=nul 1 ; 
try { // Test pour les navigateurs 
resultat= new XMLHttpRequestO ; 



Mozilla, Opera. 



catch (Error) { 

try { // Test pour les navigateurs Internet Explorer > 5.0 

resultat= new ActiveX0bject("Msxml2.XMLHTTP"); 

} 

catch (Error) { 

try { // Test pour le navigateur Internet Explorer 5.0 

resultat= new ActiveXObjectC'Microsoft.XMLHTTP"); 

} 

catch (Error) { 
resul tat= nul 1 ; 



return resultat; 
} 

Maintenant que la fonction a ete creee, il faut remplacer l'instruction de creation de 
l'objet XHR utilise jusqu'a present dans la fonction jouer( ) par un appel a la nouvelle 
fonction de creation d'objet XHR universel creationXHR( ) fonctionnant sur presque tous 
les navigateurs actuels. Pour cela, modifiez la premiere ligne du code de la fonction 
jouert ) en vous referant au code 9-11. 

Code 9-11 : 

function jouerO { 

/* Configuration et envoi de la requete ASYNCHRONE : */ 

objetXHR = creationXHRO; 

objetXHR. open ("get" ."gainAleatoi re.php" , true) ; 

objetXHR. onreadystatechange = actual iserPage; 

// Gestion du bouton et du chargement 

document. getElementBy Id ( "button" ).disabled= true; 

document. getElementBy Id ("charge"). sty le.vi si bility="visible"; 

// Envoi de la requete 

objetXHR. send(null ); 
/* */ 

} 

Les modifications de la page index.html sont maintenant terminees, il ne vous reste plus 
qu'a enregistrer la page et a la tester dans differents navigateurs (Internet Explorer et 
Firefox, par exemple). 
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Test du systeme 



Ouvrez la page index.html dans le navigateur Internet Explorer en cliquant sur le bouton 
Apercu/Debogage de Dreamweaver puis en selectionnant 1' option Apercu dans Explore 
dans la liste. Cliquez ensuite sur le bouton JOUER pour declencher 1' envoi de la requete 
asynchrone. Cette fois le systeme doit fonctionner dans le navigateur IE comme dans le 
navigateur Firefox (voir atelier precedent). Le bouton JOUER doit devenir inactif pendant la 
communication et l'animation doit apparaitre pendant cette meme periode. Au terme de 
la communication, le message et son resultat aleatoire doivent apparaitre a l'ecran. 

Renouvelez maintenant votre action sur le bouton JOUER, vous constatez que le bouton 
reste actif et que la valeur du resultat ne change plus. Que s'est-il passe ? 

En realite, le navigateur Internet Explorer a stocke la reponse correspondante a la requete 
GET du navigateur lors du premier test. Cette procedure est employee par les navigateurs 
pour accelerer le telechargement et l'affichage des pages Web. Si tous les navigateurs 
stockent les images pour permettre cette optimisation de votre navigation, Internet 
Explorer, quant a lui stocke aussi les reponses des requetes GET s'il estime qu'elle a deja 
ete effectuee auparavant. 
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Ainsi desormais, lorsque vous appuyez de nouveau sur le bouton, le navigateur identifie 
cette nouvelle demande comme etant identique a la precedente et renvoie le meme resultat 
que celui de la premiere reponse. Pour vous en convaincre, vous allez supprimer le cache 
(vous pouvez aussi utiliser le raccourci clavier Ctrl+F5 pour actualiser votre page en 
centralisant des valeurs du cache) en selectionnant l' entree Outils du menu du navigateur 
IE (voir repere 1 de la figure 9-9), puis Options Internet. Une boite de dialogue doit alors 
s'ouvrir, cliquez sur le bouton Supprimer les fichiers (voir repere 2 de la figure 9-9) puis 
sur le bouton OK de la seconde boite de dialogue (voir repere 3 de la figure 9-9). Si vous 
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testez de nouveau le systeme en cliquant sur le bouton JOUER, le meme scenario doit 
alors se reproduire. 

Nous verrons dans 1' atelier suivant comment eviter ce probleme de mise en cache de la 
reponse d'une requete GET avec Internet Explorer. 

Atelier 9-6 : requete asynchrone avec anti-cache 
Composition du systeme 

Dans 1' atelier precedent nous avons constate que le premier resultat de la requete GET est 
reste dans le cache du navigateur Internet Explorer. Dans ce nouvel atelier, nous allons 
done etudier les solutions pour remedier a ce probleme. 

Cette structure est composee : 

• d'une page HTML (index.html) dont la structure sera identique a celle de l'atelier 
precedent mais dont le code du moteur Ajax sera modifie ; 

• d'un fichier serveur PHP (gainAleatoire.php) identique a celui de l'atelier precedent 
mais dont le code sera modifie ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier precedent ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement de ce systeme est identique a celui de l'atelier precedent hormis 
l'ajout de 1' anti-cache que nous allons mettre en place. Ceci devrait maintenant permettre 
de realiser de multiples jeux dans le navigateur Internet Explorer sans avoir a vider le 
cache manuellement comme nous 1' avons fait precedemment. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 9-5 precedent (index.html) et sauvegardez-la sous le 
meme nom dans un nouveau repertoire nomme /a telle r9 -6/. Copiez ensuite les autres 
fichiers de l'atelier precedent dans ce nouveau dossier. 

Dans cet atelier, nous allons vous proposer deux solutions qui devraient, independam- 
ment l'une de 1' autre, lever le probleme de cache que nous avons identifie avec Internet 
Explorer. Vous pourriez utiliser l'une ou 1' autre selon votre choix mais 1' ideal est 
evidemment d'exploiter ces deux solutions ensemble. La premiere solution agit sur le 
moteur Ajax alors que la seconde entraine la modification du programme serveur qui 
renvoie la reponse. Notez que la premiere solution peut etre tres interessante lorsque Ton 
n'a pas acces au script serveur. 

Commencons par la premiere solution. Le principe consiste a tromper le navigateur en 
lui faisant croire que les requetes sont differentes les unes des autres. Ainsi, le navigateur 
pensant qu'il s'agit d'une nouvelle requete, ne recuperera pas la valeur precedemment 
memorisee dans le cache mais celle qui sera renvoyee par le serveur. Pour mettre en 
oeuvre cette technique, nous ajouterons une variable et sa valeur a la suite de l'URL du 
script serveur qui est configured dans le second parametre de la methode open( ). La varia- 
ble ne sera pas reellement utilisee mais 1' important est que la valeur de cette variable soit 



Applications Ajax-PHP sans parametre 



Chapitre 9 

toujours differente d'une requete a 1' autre. Nous pourrions par exemple utiliser une 
valeur generee aleatoire merit ou la valeur du temps. Dans notre exemple, nous allons 
utiliser le second choix pour mettre en oeuvre 1' anti-cache. Pour recuperer le temps et 
l'enregistrer dans une variable, nous allons utiliser la methode getTime( ) de l'objet Date. 
Celle-ci sera ensuite enregistree dans une variable nommee temps. 

Afhchez la page HTML en mode Code et ajoutez 1' instruction suivante au debut de la 
fonction jouerO afin de memoriser dans la variable temps la valeur du temps a l'instant 
meme ou la fonction sera appelee. 

| var temps = new DateO .getTimeO ; 

Une fois la valeur du parametre connue, il ne reste plus qu'a l'ajouter a la suite de l'URL 
du fichier serveur dans le deuxieme argument de la methode open ( ) de l'objet XHR (situe 
dans la fonction jouerO du moteur Ajax). Dans notre exemple, nous avons nomme le 
parametre d'URL anti cache mais vous pourriez tres bien utiliser le nom de votre choix 
car il ne sera jamais utilise. 

objetXHR.open( "get" , "gainAleatoire.php?anticache="+temps, true) ; 

Enregistrez ensuite la page index.html. Une fois modifiee, la fonction jouerO sera 
semblable au code 9-12. 

Code 9-12: 

function jouerO { 

/* Configuration et envoi de la requete ASYNCHRONE */ 

objetXHR = creationXHRO; 

var temps = new DateO .getTimeO ; 

objetXHR. open ( "get" , "gainAleatoire.php?anticache="+temps, true) ; 

objetXHR. onreadystatechange = actual iserPage; 

// Gestion du bouton et du chargeur 

document. get Element By Id ("button") .disabled= true; 

document. get Element By Id ("charge") . style. vis ibil ity=" visible" ; 

objetXHR. send(null ); 

/* */ 

} 

La seconde solution consiste a ajouter un en-tete Cache-Control dans la reponse renvoyee 
par le serveur. Cet en-tete permet de controler la mise en cache de la reponse HTTP et il 
dispose pour cela de plusieurs valeurs possibles. Dans notre cas nous utiliserons les 
valeurs no-cache et private qui indiquent aux navigateurs et aux proxy de ne pas placer la 
reponse HTTP dans leur cache. A noter que cet en-tete est adapte aux serveurs exploitant 
le protocole HTTP actuel (1.1). Si vous desirez que le blocage du cache fonctionne aussi 
sur les serveurs utilisant le protocole HTTP de la version anterieure (1.0), il faudra dans 
ce cas ajouter un second en-tete nomme Pragma et lui affecter la valeur no-cache. 

Pour generer ces en-tetes depuis le fichier PHP gainAleatoire.php, nous utiliserons des 
fonctions header( ) deja utilisees dans ce meme fichier pour indiquer le type des donnees 
renvoyees dans la reponse. Une fois modifiee, le fichier gai nAl eatoi re . php sera semblable 
au code 9-13. 

Code 9-13: 

// Indique que le type de la reponse renvoyee au client sera du texte 
header ("Content-Type: text/plain") ; 
// Anticache pour HTTP/1.1 
headerC'Cache-Control : no-cache , private"); 
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II Anticache pour HTTP/1.0 
headerC'Pragma: no-cache"); 

// Simulation du temps d'attente du serveur (2 secondes) 

sleep(Z); 

// Calcul du nouveau gain entre et 100 euros 

$resultat = rand(0,100); 

// Envoi de la reponse a la page HTML 

echo $resultat ; 



Test du systeme 



Ouvrez la page index.html dans le navigateur Internet Explorer en cliquant sur le 
bouton Apercu/Debogage de Dreamweaver puis en selectionnant 1' option Apercu dans 
Explore dans la liste. Cliquez ensuite sur le bouton JOUER pour declencher l'envoi 
d'une premiere requete asynchrone. Des que le resultat est affiche, renouvelez votre 
action sur le bouton JOUER pour vous assurer que le systeme de cache fonctionne 
correctement. Le resultat affiche par la seconde requete devra alors etre different du 
premier test. 



Atelier 9-7 : requete asynchrone avec les fonctions DOM 
Composition du systeme 

Nous allons maintenant nous interesser a la conformite de notre code aux specifications 
W3C et plus particulierement, a celle de l'attribut innerHTML que nous avons deja utilise a 
maintes reprises dans les ateliers precedents. 

Cette structure est composee : 

• d'une page HTML (index.html) dont la structure sera identique a celle de l'atelier 
precedent mais dont le code du moteur Ajax sera modifie ; 

• d'un fichier serveur PHP (gainAleatoire.php) identique a celui de l'atelier precedent ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier precedent ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement de ce systeme est stride ment identique a celui de l'atelier precedent. 
Le principal benefice des modifications que nous allons effectuer sera de disposer d'un 
moteur Ajax conforme a la normalisation du W3C et d' ameliorer ainsi la compatibilite de 
notre code avec tous les navigate urs qui respectent cette norme. 

Conception du systeme 

Ouvrez la page HTML de 1' atelier 9-6 (i ndex . html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /atel1er9-7/. Copiez ensuite les autres fichiers de 
l'atelier precedent dans ce nouveau dossier. 
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Avant de commencer la modification du code, rappelons que l'attribut i nnerHTML n'est pas 
normalise par le W3C meme si on le retrouve dans les attributs d'un element de l'arbre 
DOM. Cet attribut est sou vent utilise dans les codes des moteurs Ajax car il est tres 
pratique pour mettre a jour le contenu d'un element. En effet, il permet de remplacer 
tres facilement le contenu d'un element par une simple affectation de la nouvelle valeur. 
Dans l'exemple ci-dessous, la valeur du nouveau gain (nouveauGain) est ainsi affectee a 
l'attribut i nnerHTML de l'element resultat. Ainsi, le nouveau contenu de l'element resultat 
sera remplace par la valeur de nouveauGai n. 

Ivar nouveauGain = objetXHR. responseText; 
document. get Element By Id ("resul tat ").innerHTML=nouveauGain; 

Cependant, il n'est pas conseille d'utiliser i nnerHTML car la construction des nouveaux 
contenus avec cet attribut ne respecte pas la structuration des specifications du DOM. La 
solution recommandee consiste a exploiter les methodes de manipulation des noeuds de 
l'arbre DOM (comme appendChildO ou removeChildt ), par exemple). Evidemment, cette 
technique est beaucoup plus complexe, mais elle a le merite d'etre conforme au W3C et 
de faciliter la maintenance de votre code JavaScript. 

Pour vous faciliter la chose, nous vous proposons de creer deux petites fonctions qui 
permettront, par la suite, de vous conformer au W3C sans avoir a redevelopper des scripts 
complexes a chaque fois. 

La premiere permet de supprimer tous les noeuds enfants de l'element passe en parametre 
(voir code 9-14). Elle utilise la methode DOM removeChildO integree dans une boucle 
parcourant tous les noeuds enfants de l'element (). 

Code 9-14: 

function supprimerContenu(element) { 
if (element != nul 1 ) { 
while(el ement.fi rstChild) 

el ement.removeChild( el ement.fi rstChild) ; 
} 
) 



Resssources sur le DOM 

Pour plus de details sur les methodes et proprietes utilisees dans cette fonction, reportez-vous au chapitre 
20 consacre a la gestion DOM a la fin de cet ouvrage 



La seconde fonction, exploite la premiere, et permet de remplacer tout le contenu d'un 
element par un texte. Pour cela, il faudra preciser dans les parametres de la fonction, 
l'identifiant de l'element id et le texte a utiliser texte (voir code 9-15). Cette seconde 
fonction utilise les methodes DOM createTextNode( ) et appendChildO pour construire un 
nouveau contenu conforme aux specifications du W3C. 

Code 9-15: 

function remplacerContenuO'd, texte) { 
var element = document. getElementByld(id) ; 
if (element != nul 1 ) { 
supprimerContenu(element); 

var nouveauContenu = document. createTextNode(texte) ; 
element .appendChild(nouveauContenu) ; 
} 
} 
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Saisissez ces deux nouvelles fonctions dans notre page index.html a la suite de la fonction 
creationXHR( ) du moteur Ajax. Une fois la saisie terminee, nous pourrons alors rempla- 
cer les instructions actuelles utilisant l'attribut innerHTML par la fonction remplacer- 
Contenu( ). 

Commencons par appliquer cette nouvelle technique a la partie de code qui actualise la 
balise <div> (d'identifiant resultat) par le nouveau gain renvoye par le serveur (cette 
partie est situee dans la fonction de rappel actual iserPageO). 

Recuperez tout d'abord la valeur du nouveau gain dans la variable nouveauGain. Ensuite, 
il suffit d'utiliser la fonction declaree precedemment remplacerContenuO en passant en 
parametre l'identifiant de l'element a modifier (resultat) et la valeur du nouveau texte 
(memorisee dans nouveauGain) pour effectuer l'actualisation de la zone de resultat (voir 
code 9-16). Au niveau du fonctionnement du systeme, cela ne changera strictement rien 
mais par contre vous aurez une structure d'arbre DOM conforme au W3C. 

Code 9-16: 

Ivar nouveauGain = objetXHR. responseText; 
// Actual isation du resultat 
remplacerContenu( "resultat", nouveauGain) ; 

Nous pouvons maintenant appliquer la meme demarche a 1' autre partie de code utili- 
sant l'attribut innerHTML afin d'afficher l'eventuel message d'erreur serveur. Une fois, 
les modifications effectuees, la nouvelle fonction actual iserPaget ) ressemblera au 
code 9-17. 

Code 9-17: 

function actual iserPaget ) { 
if (objetXHR. readyState == 4) { 
if (objetXHR. status == 200) { 

var nouveauGain = objetXHR. responseText; 

// Actualisation du resultat 

// Actualise le contenu de l'element resultat avec nouveauGain 

actual iserContenut "resultat", nouveauGain) ; 

II 

// Affiche la zone info 

document. get Element By Id ( "info" ) .style. vi si bil ity=" visible" ; 

// Gestion du bouton et du chargeur 

document. get Element By Id ( "button") .disabled^ false; 

document. get Element By Id ("charge") . style. vis i bil ity=" hidden" ; 
}else{ 

// Message d'erreur serveur 

var erreurServeur="Erreur serveur : "+objetXHR.status+" - 

*»"+ objetXHR. statusText; 

remplacerContenuC'info", erreurServeur); 

document. get Element By Id ( "info" ) .style. vi si bil ity=" visible" ; 
} 
} 
} 
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Les modifications de la page index.html sont maintenant terminees, il ne vous reste plus 
qu'a enregistrer la page et a la tester dans Firefox. 



Test du systeme 



Ouvrez la page 1 ndex . html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Cliquez sur le bouton JOUER pour declencher l'envoi de la requete asyn- 
chrone. Le systeme doit fonctionner exactement de la meme maniere que dans 1' atelier 
precedent qui utilisait l'attribut i nnerHTML 



Atelier 9-8 : requete asynchrone avec fichiers JS externes 
Composition du systeme 

Au cours des ateliers precedents, nous avons ajoute de nombreuses fonctions JavaScript 
dans le moteur Ajax. Le moment est venu de faire le menage et d'organiser ces differen- 
tes fonctions dans des fichiers JS externes. Avec une structure de fichiers JS externes, la 
maintenance de vos codes sera plus facile et vous pourrez ainsi capitaliser vos scripts 
dans vos futurs developpements. 

Cette structure est composee : 

• d'une page HTML (index.html) dont la structure sera identique a celle de l'atelier 
precedent mais sans les fonctions JavaScript qui seront deplacees dans des fichiers JS 
externes ; 

• d'un nouveau fichier JS (fonctionsAjax. js) qui contiendra les fonctions communes a 
tous les moteurs Ajax ; 

• d'un nouveau fichier JS (fonctionsMachine. js) qui contiendra les fonctions specifiques 
a l'application Ajax de la machine a sous ; 

• d'un fichier serveur PHP (gainAleatoire.php) identique a celui de l'atelier prece- 
dent ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier precedent ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement de ce systeme est strictement identique a celui de l'atelier precedent. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 9-7 (i ndex . html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /atelier9-8/. Copiez ensuite les autres fichiers de 
l'atelier precedent dans ce nouveau dossier. 

Parmi les fonctions creees, certaines sont specifiques a l'application de la machine a sous 
alors que d' autres sont generiques et pourront etre reutilisees sans modification dans une 
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autre application. Nous allons done commencer par ventiler ces fonctions dans ces deux 
families afin de pouvoir les repartir ensuite dans des fichiers JS differents. 

Tableau 9-1 Ventilation des fonctions JavaScript 



Fonctions generiques 


Fonctions specifiques 


creationXHRO 


]ouer() 


supprimerContenut ) 


actual iserPage( ) 


remplacerContenut ) 



Une fois la ventilation effectuee, il faut transferer ces fonctions du fichier index, html dans 
les fichiers JS correspondant. Nous allons done creer deux fichiers JS externes : le 
premier, pour les fonctions generiques, s'appellera fonctionsAjax.js et le second, pour 
les fonctions specifiques a l'application de la machine a sous, s'appellera fonctions- 
Machine. js. 

Commencons par creer le premier fichier JS dans Dreamweaver. Dans le menu Fichier, 
cliquez sur Nouveau > Pages vierges puis selectionner l'option JavaScript dans la liste. 
Une fois le fichier cree, enregistrez-le tout de suite sous le nom fonctionsAjax.js. Passez 
ensuite dans la page index.html et coupez successivement les fonctions listees dans la 
colonne Fonctions generiques du tableau 9-1 puis collez-les dans le nouveau fichier JS. 
Une fois les trois fonctions deplacees, enregistrez votre fichier et suivez la meme proce- 
dure pour le fichier des fonctions specifiques f oncti onsMachi ne . j s. 

Lorsque toutes les fonctions JavaScript seront ainsi ventilees dans les deux fichiers JS 
externes, vous pourrez supprimer les balises <script> qui contenaient ces fonctions de la 
page index.html. Pour lier ces nouveaux fichiers externes, en revanche, nous devons 
maintenant creer deux nouveaux liens <script> pointant sur les fichiers precedemment 
crees. Pour cela, nous vous suggerons d'utiliser l'assistant d'une fonctionnalite de la 
barre d'outils Insertion de Dreamweaver. Cliquez sur l'onglet Commun de la barre 
d'outils Insertion (situe en haut de l'interface de Dreamweaver, voir figure 9-10) puis sur 
le bouton Script et selectionnez la premiere option du menu (voir repere 1 de la figure 9-10). 
Dans la boite de dialogue Script, cliquez sur le petit dossier jaune (voir repere 2 de la 
figure 9-10) et selectionnez ensuite le fichier JS desire dans 1' autre boite de dialogue 
(voir repere 3 de la figure 9-10). Cliquez enfin sur le bouton OK des deux boites de dialo- 
gue pour valider votre choix. La balise <script> qui permettra de lier votre fichier JS 
externe doit alors apparaitre dans votre code (voir code 9-18). Renouvelez ensuite cette 
demarche pour le second fichier JavaScript. 

Code 9-18: 

|<script type=" text/ javascript" src="fonctionsAjax. js"X/script> 
<script type=" text/ javascript" src="f oncti onsMachi ne. js"X/script> 

Les modifications de la page index.html sont maintenant terminees, il ne vous reste plus 
qu'a enregistrer la page et a la tester dans Firefox. 
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' Adobe Dreamweaver CS3 [C:\wampVwww1&ITEajaxlalGLtcrs\chap09Vatc]iGr9 7\index.htmL (XHTML) 




Auonscriot : 

Figure 9-10 

Creation d'un lien sur unfichier JS externe avec Dreamweaver 



Test du systeme 



Ouvrez la page 1 ndex . html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Cliquez sur le bouton JOUER pour declencher l'envoi de la requete asyn- 
chrone. Le systeme doit fonctionner exactement de la meme maniere que dans 1' atelier 
precedent dans lequel les fonctions etaient declarees dans la page i ndex . html . 



10 



Applications Ajax-PHP 
avec para metres GET 



Jusqu'a present, nous nous sommes contentes d'envoyer des requetes sans parametre : 
nous n'en avions pas besoin car le serveur nous renvoyait une valeur aleatoire qui chan- 
geait a chaque appel. Or, dans la majorite des applications Ajax, il est interessant de 
pouvoir communiquer un ordre au script serveur de sorte qu'il puisse traiter la requete en 
fonction de cette information et renvoyer une reponse en rapport. Pour cela, nous allons 
devoir ajouter des parametres lors de 1' envoi de la requete et les gerer cote serveur. 
Les ateliers de ce chapitre sont consacres a la mise en oeuvre de telles applications. 



Atelier 10-1 : requete asynchrone avec un champ texte 
Composition du systeme 

Pour commencer, nous allons traiter un exemple simple en ajoutant un champ de saisie 
au formulaire de l'application de l'atelier precedent proposant au joueur d'indiquer son 
nom afin que la reponse du serveur soit personnalisee en consequence (la valeur saisie 
dans ce champ sera ensuite recuperee et envoy ee en parametre au serveur). Comme nous 
aurons cette fois deux informations retournees par le serveur (le nom du joueur et son 
gain) nous en profiterons pour vous presenter une solution simple pour gerer une reponse 
HTTP du serveur constitute de plusieurs valeurs. 

Cette structure est composee : 

• d'une page HTML (index.html) dont la structure sera identique a celle de l'atelier 
precedent mais avec un champ de saisie en plus dans le formulaire ; 

• d'un fichier JS (fonctionsAjax.js) qui contiendra les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (fonctionsMachine.js) qui contiendra les fonctions specifiques a l'appli- 
cation Ajax de la machine a sous dont la structure de base avant modification sera iden- 
tique a celle de l'atelier precedent ; 
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• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celle de 
1' atelier precedent mais qui sera modifie pour gerer le parametre de la requete ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier precedent ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Une fois la page index.html chargee dans le navigateur, l'utilisateur devra saisir son nom 
avant de cliquer sur le bouton JOUER pour declencher le moteur Ajax. Celui-ci recupe- 
rera la valeur saisie dans le champ et l'enverra en parametre au serveur. A la reception de 
la requete, le serveur recuperera le parametre pour conditionner le traitement a effectuer. 
Dans notre exemple, le traitement sera tres simple car le serveur se contentera de 
renvoyer le nom de l'utilisateur dans sa reponse en plus de la valeur du gain. A la reception 
de la reponse, la fonction de rappel du moteur Ajax analysera son contenu pour en tirer 
les deux informations attendues (le nom du joueur et son gain). II mettra ensuite en forme 
ces informations dans un texte qui s'affichera a l'ecran selon la structure ci-dessous (avec 
XXI pour le nom du joueur et XX2 pour la valeur du gain). 

Bravo M. XXI, vous avez gagne XX2 euros 

Conception du systeme 

Ouvrez la page HTML de l'atelier 9-8 (index.html) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chaplO/atelierlO-1/. Copiez ensuite les autres 
fichiers de l'atelier precedent dans ce nouveau dossier. 

Nous allons commencer par ajouter le champ de saisie dans le formulaire. Pour cela, 
ouvrez la page index.html en mode Creation et agrandissez la zone <div> (dont l'identi- 
fiant est f ormul ai re) a l'aide de ses poignees de sorte a pouvoir y inserer l'objet du champ 
de saisie et un texte d'information (voir reperes 3 et 4 de la figure 10-1). Pour ajouter le 
champ dans le formulaire, vous pourrez avantageusement utiliser les elements de formu- 
laire de l'onglet Formulaire de la barre d'outils Insertion (voir repere 1 de la figure 10-1). 
Selectionnez ensuite le champ de saisie et renseignez 1' information Champ texte du 
panneau des Proprietes avec la valeur nom de sorte a identifier ce nouvel element (cette 
procedure configure les attributs name et id du champ). Une fois modifiee, la partie de la 
zone formulaire doit correspondre au code 10-1. 

Code 10-1 : structure de la page index, html : 

<div id="formulai re"> 
<form method="GET"> 
Indiquez votre nom : 

<input type="text" id="nom" name="nom" /> 
avant de 

<input name="button" id="button" type="button" onClick="jouer( ) ; " value="JOUER" / 
</form> 
</div> 

Evidemment, au lieu de redimensionner la taille de la zone formulaire avec les poignees, 
vous pouvez aussi modifier la regie de styles formulaire directement dans la feuille de 
styles style. ess. Dans ce cas, utilisez les informations du code 10-2. 
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Figure 10-1 

Modification de la zone<div> du formulaire et ajout du champ de saisie 



Code 10-2 : regie de style f ormul ai re : 

#formulaire { 

position: absolute; 
left: 38px; 
top: 103px; 
width: 532px; 



Restez dans cette meme page index.html mais passez en mode Code, puis localisez la 
ligne de la balise <div> dont l'identifiant est info. Modifiez ensuite son contenu en ajou- 
tant une nouvelle balise <span> dont l'identifiant sera gagnant de sorte a pouvoir y inserer 
le nom du gagnant selon l'exemple de code suivant. 

|<div id="info">Bravo, M <span id="gagnant"X/span> vous avez gagne 
**<span id="resul tat"X/span> euros</div> 

Les modifications de la page index.html sont maintenant terminees, enregistrez votre 
fichier ainsi que le fichier styl e . ess qui a ete aussi modifie automatiquement par Dream- 
weaver lors du redimensionnent de la balise <di v>. 

Ouvrez maintenant le fichier fonctionsMachine. js. Nous devons inserer dans ce fichier, le 
script qui permettra de recuperer la valeur saisie par l'utilisateur dans le champ nom et 
1 ' aj outer en parametre a 1 ' URL lors de 1 ' appel du serveur. Pour cela nous allons commencer 
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par recuperer la valeur saisie dans une variable locale de la fonction jouer( ) en utilisant 
l'attribut val ue de l'element concerne. 

var nom = document. getElementByldC'nom") .value; 

II faut ensuite construire les parametres a envoyer en associant la variable anti cache avec 
la nouvelle variable nom precedemment recuperee. Pour cela, nous allons creer une 
nouvelle variable locale nommee parametres qui contiendra une chaine de caracteres 
realisee par la concatenation des deux variables et de leur valeur au format d'URL. 

var parametres = "nom="+ nom +"&anticache="+temps ; 

Maintenant que nous disposons de tous les elements regroupes dans une seule variable 
parametres, il suffit d'ajouter cette meme variable a la suite de l'URL du serveur (precedee 
du caractere ?) dans le second parametre de la methode open( ) : 

objetXHR. open ("get" ,"gainAleatoire.php?"+parametres, true) ; 

La fonction jouer( ) apres sa modification doit etre semblable au code 10-3 : 

Code 10-3 : fonction jouerO : 

function jouerO { 

objetXHR = creationXHRO; 

var temps = new Date( ) .getTime( ) ; 

var nom = document. getElementByldC'nom") .value; 

var parametres = "nom="+ nom + 

"&anticache="+temps ; 

objetXHR. open( "get" ,"gainAleatoire.php?"+parametres, true) ; 

objetXHR. onreadystatechange = actual iserPage; 

document. get Element By Id ("button" ) .disabled= true; 

document. get Element By Id ("charge" ) .style. vi si bil ity=" visible" ; 

objetXHR. send(null); 
} 

Les modifications du code cote client ne sont pas terminees (le fichier fonctionsMachine.js 
doit encore etre modifie), mais nous allons d'abord nous preoccuper du fichier serveur en 
PHP avant de terminer les modifications du moteur Ajax. 

Ouvrez le fichier gai nAl eatoi re . php et passez en mode Code. Le fichier serveur doit inter- 
preter le nouveau parametre envoye dans la requete puis traiter et renvoyer une reponse 
en rapport au navigateur. 

Nous allons done commencer par recuperer la valeur passee en parametre dans une variable 
locale $nom du programme. Pour cela nous utiliserons le code suivant. 

Ii f ( i sset ( $_REQUEST[ ' nom ' ] ) ) $nom=$_REQUEST[ ' nom' ] ; 
else $nom="inconnu" ; 

Dans ce code, nous testons si la variable envoyee en parametre existe avec la fonction 
isset($„REQUEST[ 'nom' ] ). A noter que, dans notre exemple, comme la requete est envoyee 
en GET, nous aurions aussi pu utiliser la variable HTTP $_GET['nom'] mais 
$_REQUEST['nom'] a le merite de fonctionner aussi bien avec la methode GET qu'avec la 
methode POST. Dans le cas ou le parametre n'existe pas, nous utilisons une structure el se 
pour affecter la valeur i nconnu a la variable $nom pour ne pas generer de message d'erreur 
en cas d' absence de parametre. 

Comme nous n'effectuons pas de traitement specifique sur le nom de l'utilisateur, il ne 
nous reste plus maintenant qu'a preparer la reponse a envoyer au navigateur. Or, dans ce 
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nouveau systeme, nous desirons renvoyer deux informations au client : le gain mais aussi 
le nom du joueur. Pour cela nous allons utiliser un format specifique dans lequel nous 
allons separer les deux valeurs avec un caractere choisi. En 1' occurrence nous allons utili- 
ser le caractere « : » comme separateur mais vous pourriez aussi utiliser le caractere de 
votre choix (comme « | » par exemple qui est aussi souvent employe pour cet usage). La 
reponse renvoyee par le serveur aura done la structure suivante (avec XXI pour la valeur 
du nom de l'utilisateur et XX2 pour la valeur du gain) : 

XXI : XX2 

Pour construire la reponse dans ce format en PHP, nous allons utiliser des operateurs de 
concatenation pour inserer le caractere « : » entre les deux valeurs. La chaine ainsi 
composee sera ensuite enregistree dans la variable $resultat. 

$resultat=$nom. ' : ' .$gain; 

Par rapport a 1' atelier precedent, vous remarquerez que le gain est maintenant enregistre 
dans une variable specifique nominee $gai n, il faudra done changer le nom de cette varia- 
ble lors de son calcul. Les modifications du code du fichier serveur gainAleatoire.php 
sont maintenant terminees, vous pouvez l'enregistrer avant de revenir a notre fichier 

fonctionsMa chine. js. 

//indique le type de la reponse renvoyee 

header ("Content-Type: text/plain") ; 

//simulation du temps d'attente du serveur (2 secondes) 

sleep(2); 

//recuperation du parametre HTTP nom 

if(isset($_REQUEST['nom'])) $nom=$_REQUEST['nom']; 

else $nom="inconnu"; 

//calcul du nouveau gain entre et 100 euros 

$gain = rand(0,100); 

//mise en forme du resultat avec le nom 

$resultat=$nom. ' :'.$ga1n; 

//envoi de la reponse a la page HTML 

echo $resultat ; 

Maintenant que nous avons presente le format dans lequel vont etre renvoyes les resul- 
tats, nous pouvons revenir au fichier fonctionsMachine.js pour gerer la recuperation de la 
reponse en tenant compte de ce format. Pour memoire, lors de la reception de la reponse 
par le navigateur, e'est la fonction de rappel du moteur Ajax (actual iserPageO) qui va 
etre executee pour appliquer les nouveaux resultats a la page Web. C'est done dans cette 
meme fonction que nous allons aj outer notre code de traitement des resultats. 

Pour recuperer individuellement chacun des deux resultats, nous allons utiliser la 
methode splitO qui permet de retourner dans un tableau de variables les differents 
elements d'une chaine separes par un caractere specifique. Evidemment, vous avez 
devine que le caractere que nous allons utiliser sera « : ». Ainsi, si on applique cette 
methode au resultat disponible dans la propriete responseText de l'objet XHR, nous 
disposerons d'un tableau des resultats dans lequel le premier element (indice du 
tableau) sera le nom du joueur et le second (indice 1) sera le montant du gain. 

var nouveauResul tat = objetXHR. responseText. splitt":"); 

II est maintenant facile d'affecter ces deux informations aux zones qui les concernent 
avec la fonction DOM que nous vous avons presente dans un atelier precedent. Ainsi, la 
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valeur d'indice 1 du tableau de resultat (soit nouveauResultat[l]) remplacera le contenu 
de la balise <span> d'identifiant resultat et celui d'indice (soit nouveauResultat[0]) 
remplacera le contenu de la balise <span> d'identifiant gagnant. A noter la presence de la 
methode decodeURI ( ) qui permettra de decoder le format d'URL de la reponse renvoyee 
par le serveur. Par exemple, si la reponse contient un espace, il est alors remplace par la 
suite de caractere %Z0 lorsqu'elle est formatee en URL par le serveur avant de la renvoyer 
au navigate ur, cette methode remplacera done cette suite de carateres par 1' espace initial 
avant de l'integrer dans la page. 

I remplacerContenu( "resultat", decodeURI (nouveauResultat[l])); 
remplacerContenuC "gagnant", decodeURI (nouveauResul tat [0])) ; 

Apres ces modifications, le code de la fonction actual i serPage( ) doit etre semblable a 
celui du code 10-4. 

Code 10-4 : fonction actual iserPageO : 

function actual iserPaget ) { 

if (objetXHR.readyState == 4) { 
if (objetXHR. status == 200) { 

//recuperation des resultats dans le tableau nouveauResultat[] 

var nouveauResultat = objetXHR. responseText. spl it(":") ; 

//actual isation du nom 

remplacerContenuC "resultat", decodeURI (nouveauResul tat[l])) ; 

//actual isation du nom 

rempl acerContenu( "gagnant" , decodeURI (nouveauResul tat[0] ) ) ; 

document. getElementById( "info" ) .style. vi si bility=" visible" ; 

document. get Element By Id ("button") .disabled= false; 

document. get Element By Id ("charge") . style. vis ibil ity=" hidden" ; 
}else{ 

} 

} 
} 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 



Test du systeme 



Sous Dreamweaver, ouvrez la page i ndex . html dans le navigateur Firefox en appuyant sur 
la touche F12. Saisissez ensuite votre nom dans le champ du formulaire (voir repere 1 de 
la figure 10-2) et appuyez sur le bouton JOUER (voir repere 2 de la figure 10-2). La 
requete doit alors etre envoy ee, le bouton JOUER neutralise et 1' animation du chargeur 
apparaitre pendant le temps du traitement. A la reception des resultats, le bouton doit se 
debloquer, l'animation du chargeur disparaitre et les resultats etre affiches a l'ecran selon 
la formulation que nous avons definie dans le programme (voir reperes 3 et 4 de la 
figure 10-2). 

Nous desirons maintenant simuler un probleme de compatibilite du navigateur lors de la 
creation d'un objet XHR. Pour mettre en oeuvre cette simulation, nous allons revenir dans 
Dreamweaver et modifier la fonction creationXHRO du fichier fonctionsAjax.js. Pour 
cela, commentez la ligne de creation de 1' objet XHR (en ajoutant « // » en debut de 
ligne) correspondant au navigateur Firefox (et autres navigateurs compatibles). 

//resultat= new XMLHttpRequestt ) ; 
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D'autre part, pour le joueur, le systeme restera ainsi bloque et les symptomes du 
probleme doivent se limiter a ce simple avertissement, ce qui est plutot deroutant, il faut 
l'avouer. 

En ce qui vous conceme, comme vous etes le developpeur de 1' application et que vous 
avez prealablement installe 1' extension Firebug sur votre navigateur, vous avez la possi- 
bility d'en savoir plus en cliquant sur l'indication de l'erreur en bas du navigateur. Fire- 
bug doit alors s'ouvrir et sa console doit se positionner automatiquement sur la ligne 
provoquant le probleme (voir repere 2 de la figure 10-3). II est alors facile d'en deduire 
que l'origine du dysfonctionnement est lie au fait que l'objet XHR ne peut pas etre cree 
avec cette version de navigateur. 

Je pense que vous concevez qu'un probleme de ce genre doit etre controle afin d'infor- 
mer explicitement l'utilisateur que son navigateur est trop vieux, ou du moins, qu'il 
n'est pas compatible avec l'application Ajax avant meme qu'il ne perde du temps a 
saisir des informations inutilement. Aussi, nous allons consacrer 1' atelier suivant a lever 
ce probleme. 



Atelier 10-2 : requete asynchrone avec test du navigateur 
Composition du systeme 

Dans 1' atelier precedent, nous avons remarque qu'en cas d'incompatibilite du navigateur 
avec l'application Ajax, le message d'erreur n'apparaissait que lors de l'envoi de la 
requete et etait pour le moins discret et incomprehensible pour la majorite des utilisa- 
teurs. Nous allons voir dans cet atelier comment controler ce probleme afin d'afficher un 
message d'erreur explicite a l'ecran et surtout detecter la compatibilite du navigateur des 
le chargement de la page Web. 

Cette structure est composee : 

• d'une page HTML (index.html) dont la structure debase avant modification seraiden- 
tique a celle de 1' atelier precedent ; 

• d'un fichier JS (fonctionsAjax.js) qui contiendra les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (fonctionsMachine.js) qui contiendra les fonctions specifiques a l'appli- 
cation Ajax de la machine a sous dont la structure de base avant modification sera iden- 
tique a celle de 1' atelier precedent ; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celle de 
1' atelier precedent ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier precedent ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du systeme sera identique a celui de l'atelier precedent hormis le fait 
qu'en cas d'incompatibilite (reelle ou simulee) du navigateur, un message d'erreur s'affi- 
chera des le chargement initial de la page Web. 
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Conception du systeme 



Ouvrez la page HTML de l'atelier 10-1 precedent (index.html) et sauvegardez-la sous le 
me me nom dans un nouveau repertoire nomme /chaplO/atelierlO-2/. Copiez ensuite les 
autres fichiers de l'atelier precedent dans ce nouveau dossier. 

Pour controler la compatibilite du navigateur des son chargement, nous allons mettre en 
oeuvre une fonction specifique nommee testerNavigateurO que nous appellerons des la 
fin du chargement de la page (pour etre stir que tous les elements de la page sont bien 
disponibles). Cette fonction etant specifique a 1' application, nous l'enregistrerons dans le 
fichier fonctionsMachine. js. 

Pour verifier que le navigateur est capable de creer un objet XHR, nous allons en creer un 
(ou du moins essayer si toutefois il n'est pas compatible) des le debut de la fonction. 
Nous rappelons que la fonction creationXHRO renvoie l'objet cree si l'un des tests try a 
fonctionne ou l'etat null dans le cas contraire. Nous allons done nous appuyer sur cette 
valeur de retour pour conditionner un test i f ( ) dont le bloc contiendra les instructions a 
executer si le navigateur n'est pas compatible (voir code 10-5). 

Code 10-5 : Debut de la fonction testerNavigateurO : 

objetXHR = creationXHRO; 
if(objetXHR==null) { 

//instructions a executer si le navigateur n'est pas compatible 
} 

Ainsi, en cas d'incompatibilite, nous pouvons desactiver le bouton JOUER par exemple 
avec l'instruction ci-dessous : 

document. getElementById( "button" ).disabled= true; 

De meme, nous pouvons afficher un message d'erreur dans la zone info avec les trois 
instructions ci-dessous : 

var erreurNavigateur="Erreur Navigateur : Creation d'objet XHR impossible"; 

remplacerContenuC'info", erreurNavigateur) ; 

document. getElementById( "info") .style.visibility="visible"; 

Comme nous avons deja utilise ce type d' instructions dans un atelier precedent pour affi- 
cher un message d'erreur serveur, il est inutile de revenir dessus. Une fois creee, la fonction 
testerNavigateurO doit etre semblable au code 10-6. 

Code 10-6 : fonction testerNavigateurO : 

function testerNavigateurO ( 
objetXHR = creationXHRO; 
if(objetXHR==null) { 
document. getElementById( "button" ).disabled= true; 

var erreurNavigateur="Erreur Navigateur : Creation d'objet XHR impossible"; 
remplacerContenuC'info", erreurNavigateur) ; 
document. getElementById( "info") .style.visibility="visible"; 
} 
} 

Pour appeler cette fonction au chargement de la page nous pourrions simplement ajouter 
un gestionnaire d'evenements onl oadO dans la balise <body> de la page Web en ajoutant 

danslapageindex.html : 

<body onload="testerNavigateur();" > 
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Cependant, il est preferable d'utiliser un gestionnaire d'evenement DOM (utilisant la 
propriete onload de l'objet document, voir le chapitre 20 sur le DOM Event pour plus de 
detail) place directement dans le code JavaScript et non dans une balise HTML. Cette 
technique ameliore la lisibilite du code et facilite sa maintenance en dissociant parfaite- 
ment la structure et le contenu du code du traitement JavaScript. Pour cela, il suffit 
d'ajouter 1' instruction ci-dessous directement dans le code JavaScript de 1' application : 

window. document. onload=testerNavigateur ; 

D' autre part, pour la meme raison que celle invoquee precedemment (separation de la 
structure et du traitement JS), nous allons profiter de cette nouvelle fonction testerNavi- 
gateuK), qui sera appelee a la fin de chaque chargement de la page, pour y integrer le 
gestionnaire d'evenement onclick du bouton JOUER qui etait, jusqu'a present, place 
dans la balise HTML <input> de la page index.html. 

Pour cela, il suffit de supprimer le gestionnaire actuel de la page index.html 
(oncl ick="jouer( ) ; ") et de le remplacer par l'instruction ci-dessous placee a la fin de la 
fonction testerNavigateurO. 

function testerNavigateurO { 

document. getElementById( "button"). oncl ick=jouer; 
} 



Declaration dun gestionnaire d'evenement dans le code JS 

Les gestionnaires d'evenements appliques a un element d'une page HTML doivent etre declares apres le 
chargement de I'element concerne. En pratique, nous vous conseillons de regrouper ces declarations 
dans un gestionnaire onload dont le contenu sera execute apres le chargement complet de la page 
HTML 



Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 



Test du systeme 



Sous Dreamweaver, ouvrez la page i ndex . html dans le navigateur Firefox en appuyant sur 
la touche F12. Testez le systeme normalement (verifiez que la ligne de creation de l'objet 
pour Firefox a bien ete decommentee) pour vous assurer que nos modifications n'ont pas 
perturbe le fonctionnement du systeme. Ouvrez ensuite le fichier fonctionsAjax.js dans 
Dreamweaver et commentez la ligne de creation de l'objet XHR correspondant au navi- 
gateur Firefox comme nous l'avons fait dans la seconde partie des tests de l'atelier prece- 
dent afin de simuler une erreur. 

Enregistrez votre fichier et testez de nouveau votre systeme en appuyant surF12 apres 
avoir ouvert la page index.html dans Dreamweaver. Cette fois, contrairement aux 
derniers tests de l'atelier precedent, un message d'erreur comprehensible doit apparaitre 
dans la page Web des le chargement de celle-ci, vous signalant que le navigateur utilise 
n'est pas compatible et que l'objet XHR n'a pas pu etre cree (repere 2 voir figure 10-4) et 
le bouton JOUER doit etre desactive (repere 1 voir figure 10-4) afin d'eviter que l'utilisateur 
tente d'envoyer une requete. 

Retournez dans Dreamweaver et retablissez l'etat initial de la fonction creati onXHR( ) (en 
decommentant la ligne de creation de l'objet pour Firefox). Sauvegardez votre fichier 
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puis renouvelez vos tests pour verifier que tout est bien retabli et que le systeme fonc- 
tionne de nouveau comme avant. 



Figure 10-4 
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Nous vous proposons maintenant d'utiliser pour vos tests le navigateur Internet Explorer 
pour s' assurer que nous n'avons pas de probleme de cache. Pour faire des tests sous IE, 
nous vous rappelons que vous pouvez soit utiliser l' extension IE Tab de Firefox, soit 
selectionner le navigateur IE dans la liste du bouton Apercu/Debogage de Dreamweaver. 
Quelle que soit la methode utilisee, le resultat devrait etre semblable a celui des tests avec 
Firefox realises precedemment, prouvant ainsi que notre anti cache fonctionne aussi avec 
P envoi d'un parametre dans la requete. 

Profitons d'etre avec le navigateur IE pour faire des tests plus pousses. Pour cela, nous 
vous suggerons de saisir dans le champ le nom suivant « Chapelie » avant de cliquer sur 
le bouton JOUER. 

Le resultat obtenu est alors pour le moins surprenant (voir figure 10-5). Les caracteres 
accentues du nom semblent avoir completement paralyse notre systeme ! 



Figure 10-5 
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En realite, nous venons de mettre le doigt sur le probleme de Pencodage des donnees 
entre le navigateur et le serveur. Nous allons voir dans P atelier suivant comment lever ce 
probleme. 
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Atelier 10-3 : requete asynchrone avec gestion de I'encodage 
Composition du systeme 

Dans 1' atelier precedent, nous avons identifie un probleme d'encodage avec le navigate ur 
Internet Explorer lorsque le nom du joueur comportait des caracteres accentues. Nous 
vous proposons maintenant de remedier a ce probleme en ajoutant au systeme les instructions 
adequates a une bonne gestion de I'encodage. 

Cette structure est composee : 

d'une page HTML (index.html) dont la structure debase avant modification seraiden- 
tique a celle de 1' atelier precedent ; 

d'un fichier JS (fonctionsAjax.js) qui contiendra les fonctions communes a tous les 
moteurs Ajax ; 

d'un fichier JS (fonctionsMachine.js) qui contiendra les fonctions specifiques a 1' appli- 
cation Ajax de la machine a sous ; 

d'un fichier serveur PHP (gal nAl eatoi re . php) dont la structure de base avant modification 
sera identique a celle de 1' atelier precedent ; 

d'une feuille de styles (styl e . ess) identique a celle de l'atelier precedent ; 

d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du systeme sera identique a celui de l'atelier precedent hormis le fait 
que lors de la saisie d'un nom comportant des caracteres accentues, celui-ci sera correc- 
tement interprets cote serveur mais aussi cote client lors de la reception de la reponse. 

Conception du systeme 

Ouvrez la page HTML de 1' atelier 10-2 (i ndex . html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chaplO/atelierlO-3/. Copiez ensuite les autres 
fichiers de l'atelier precedent dans ce nouveau dossier. 

Pour gerer correctement I'encodage des caracteres dans une application Ajax, il faut 
s' assurer que celui-ci est le meme cote serveur et cote client (navigateur). Nous pourrions 
travailler en ISO-8859-1 (Latin-1) ou en UTF-8, l'important est qu'il soit configure de la 
meme maniere de part et d' autre. Rappelons tout de meme que I'encodage ISO-8859-1 
permet de coder tous (ou presque) les caracteres utilises en Europe occidentale. L'UTF- 
8, quant a lui, fait partie du standard Unicode qui permet de coder tous les caracteres 
utilises dans le monde entier. La partie commune de ces deux types de codage correspond 
aux 128 caracteres ASCII comprenant tous les caracteres non accentues d'un clavier 
d' ordinate ur. Cela explique notamment qu'il est rare d' avoir des problemes d'encodage 
avec les lettres sans accent, ce qui n'est pas le cas des que Ton commence a utiliser des 
caracteres accentues ou des symboles particuliers. 

Chaque systeme d'encodage a des avantages et des inconvenients mais il serait trop long 
de les enumerer ici. Aussi, dans cet atelier, nous allons employer I'encodage UTF-8 et 
allons voir comment le parameter cote client, pour les informations issues d'un champ 
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de formulaire par exemple puis envoyees au serveur et, a 1' inverse cote serveur pour les 
informations retournees dans les reponses HTTP du serveur. 

Commencons par le client : l'encodage d'une application Ajax pouvant differer d'un 
navigateur a 1' autre (comme nous venons de le constater avec IE), il est preferable de prendre 
les devants et d'encoder nous meme en UTF-8 les parametres emis lors d'une requete. 
Pour cela, nous utiliserons la fonction encodeURIComponentO qui encode une chaine de 
caracteres en UTF8. 

Pour vous faciliter la tache, sachant que les informations emises en parametre dans une 
requete HTTP seront tres souvent issues d'un champ de formulaire ou du moins d'une 
balise pouvant etre identified par son identifiant, nous allons vous proposer de creer une 
petite fonction qui retournera le contenu d'un element code automatiquement en UTF-8 
en indiquant simplement 1' identifiant de 1' element concerne en parametre. Les instruc- 
tions de cette fonction sont tres simples, la premiere permet de recuperer le contenu de 
l'element a l'aide de sa propriete value et la seconde permet de lui appliquer le code 
UTF-8 avec encodeURIComponent( ) avant de retourner le resultat ainsi code (voir code 10-7). 

Code 10-7 : fonction codeContenuO : 

function codeContenu(id) { 

var contenu=document.getElementById( id). value; 

return encodeURIComponent(contenu) ; 
} 

Cette fonction pouvant etre exploitee par la suite dans d'autres applications Ajax sans 
modification, nous allons done l'inclure dans le fichier fonctionsAjax.js. Ouvrez pour 
cela ce fichier, saisissez le code 10-8 a la suite des autres fonctions et enregistrez votre 
modification. 

Par contre, l'utilisation de cette fonction devra se faire dans le fichier fonctionsMachine.js. 
Ouvrez le fichier et localisez la ligne de code qui permet de creer la variable parametres 
dans la fonction jouerO. II suffit ensuite de remplacer la variable nom par un appel a la 
fonction precedemment creee pour encoder en UTF-8 le parametre envoye au serveur. 

var parametres = "nom="+ codeContenuC'nom") + "&anticache="+temps ; 

Evidemment, l'instruction precedent cette ligne de code, qui permettait de recuperer la 
valeur de l'element nom peut maintenant etre supprimee puisqu'elle est desormais integree 
a la fonction. La fonction jouer( ) une fois modifiee doit etre semblable au code 10-8. 

Code 10-8 : fonction jouer( ) : 

function jouerO { 

objetXHR = creationXHRO; 

var temps = new Date( ) .getTimet ) ; 

var parametres = "nom="+ codeContenuC'nom") + 
"&anticache="+temps ; 

objetXHR. open ( "get" , "gainAleatoi re.php?"+parametres, true) ; 

objetXHR. onreadystatechange = actual iserPage; 

document. get Element By Id ("button") .disabled= true; 

document. get Element By Id ("charge") . style. vis ibil ity=" visible" ; 

objetXHR. send(null ) ;//envoi de la requete 
} 

Etudions maintenant le cote serveur et ouvrons le fichier gainAleatoire.php dans Dream- 
weaver. Comme nous l'avons mentionne precedemment, l'encodage doit etre le meme 
cote client et cote serveur. L'encodage par defaut du serveur pouvant varier selon sa 
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configuration, il est preferable de s' assurer que la reponse sera bien renvoyee en UTF-8 
en ajoutant un en-tete adapte. Dans notre fichier PHP, nous avions deja parametre l'en- 
tete Content-type avec text/plain pour indiquer que le type de reponse etait du texte 
simple. Nous allons maintenant ajouter a cet en-tete une seconde propriete charset=utf-8 
afin de preciser que les donnees de la reponse seront encodees en UTF-8. Ainsi, cote 
client, a la reception de cet en-tete, JavaScript pourra interpreter correctement l'information 
contenue dans le corps de la reponse car il saura que l'encodage utilise est UTF-8. 

Apres sa modification, le fichier serveur gai nAl eatoi re . php doit etre semblable a celui du 
code 10-9. 

Code 10-9 : fichier gai nAl eatoi re. php : 

headert "Content-Type: text/plain ; charset=utf-8") ; 

headerC'Cache-Control : no-cache , private"); 

headert "Pragma: no-cache"); 

sleep(2); 

if(isset($_REQUEST[ , nom'])) $nom=$_REQUEST[ 'nom'] ; 

else $nom="inconnu" ; 

$gain = rand(0,100); 

$ result a t=$nom. ' : ' . $ g a i n ; 

echo Sresultat; 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur Internet Explorer. 



Test du systeme 



Ouvrez la page index.html dans le navigateur Internet Explorer en utilisant le bouton 
Apergu/Debogage de Dreamweaver et en selectionnant le navigateur IE dans la liste. Nous 
allons renouveler le test de 1' atelier precedent qui avait abouti a une erreur en saisissant 
le nom « Chapelie » dans le champ du navigateur puis en cliquant sur le bouton JOUER. 
Cette fois, le systeme doit fonctionner sans erreurs et le nom correctement orthographie 
doit s'afhcher dans le message de la reponse (voir figure 10-6). 



Figure 10-6 
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Voyons maintenant le cas d'un utilisateur distrait qui oublie de saisir son nom. Dans ce 
cas, le systeme ne genere pas d' erreur mais aucun nom n'apparaitra dans le message du 
resultat. Si pour notre application cela n'est pas grave, il peut en etre autrement dans des 
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systemes ou 1' information est necessaire au traitement des donnees cote serveur. Aussi, 
dans l'atelier suivant, nous vous proposerons d'etudier la mise en place d'un controle des 
donnees saisies par l'utilisateur. 

Atelier 10-4 : requete asynchrone avec controle de la saisie 
Composition du systeme 

Dans l'atelier precedent, nous avons remarque que si l'utilisateur oubliait de saisir son 
nom dans le champ du formulaire, la requete etait tout de meme envoyee au serveur. 
Nous desirons maintenant changer ce fonctionnement et forcer l'utilisateur a saisir son 
nom. 

Cette structure est composee : 

• d'une page HTML (1 ndex . html ) identique a celle de 1' atelier precedent ; 

• d'un fichier JS (fonctionsAjax.js) qui contiendra les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (fonctionsMachine.js) qui contiendra les fonctions specifiques al'appli- 
cation Ajax de la machine a sous ; 

• d'un fichier serveur PHP (gainAleatoire.php) identique a celui de l'atelier precedent ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier precedent ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du systeme sera identique a celui de l'atelier precedent, hormis le fait 
que si l'utilisateur oublie de saisir son nom dans le champ du formulaire, une boite 
d'alerte s'affichera pour lui rappeler que le nom est obligatoire et le champ concerne 
deviendra rouge. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 10-3 (index.html) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chaplO/atelierlO-4/. Copiez ensuite les autres 
fichiers de l'atelier precedent dans ce nouveau dossier. 

Nous pourrions traiter ce controle de saisie de differentes manieres. La facon la plus 
simple serait d'inserer un simple gestionnaire d'evenement (onChange ou onBlur par 
exemple) sur le champ concerne afin de declencher une fonction de controle du champ au 
fil de la saisie et afficher un message d'alerte si necessaire. Mais dans le cadre de cet 
atelier, nous avons decide de faire le controle a la fin de la saisie, au moment ou l'utilisa- 
teur appuiera sur le bouton JOUER, afin de bloquer l'envoi de la requete si le test est 
negatif. 

La fonction jouer( ) etant appelee par une action sur le bouton JOUER, e'est au debut de 
cette fonction que nous allons placer la procedure de controle. Si, lors du controle, le 
champ est detecte comme vide, nous afficherons une simple boite de dialogue rappelant 
a l'utilisateur que la saisie du champ nom est obligatoire et nous changerons la couleur de 
ce meme champ pour bien le mettre en evidence. 
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Ouvrez le fichier fonctionsMachine.js et placez-vous au debut du bloc de la fonction 
jouer( ). Avant de faire le test, nous allons recuperer la valeur du champ de saisie dans 
une variable que nous allons nommer nom. 

var nom=document. getEl ementBy Id ( "nom" ) . val lie; 

Maintenant que le contenu du champ est connu, nous pouvons mettre en place le test qui 
va conditionner le message d'alerte et la modification de la couleur du champ en rouge. 
A noter que si vous desirez modifier avec le DOM une propriete de style dont le nom 
equivalent en CSS est compose (comme par exemple : background-col or), il faudra trans- 
former le nom de cette propriete avant de l'appliquer a l'objet styl e en supprimant le tiret 
et en ajoutant une majuscule a la premiere lettre du second mot (soit pour l'exemple 
considere precedemment : backgroundCol or, voir si besoin le tableau d'equivalence de ces 
proprietes dans la partie consacree a la manipulation des styles du chapitre 20 sur la 
gestion du DOM). 

I if (nom=="" ) { 
document .get El ementBy Id ( "nom") .style. backgroundCol or="red"; 
alertC'Attention : vous devez saisir votre nom avant de jouer"); 

Une fois que les actions d'information de l'utilisateur sont executees, nous devons sortir 
de la fonction jouerO pour eviter d'envoyer la requete. Pour cela, nous ajouterons 
l'instruction return juste avant la fin du bloc conditionne par le test i f ( ). 

return null ; 

Si nous nous arretons a ces seules instructions, le champ de saisie restera toujours rouge 
meme apres que l'utilisateur ait corrige son erreur et renseigne son nom. II faut done 
prevoir une instruction d'initialisation par defaut de la couleur du champ en blanc au tout 
debut de la fonction jouer( ) (voir le code 10-10). 

Code 10-10 : fonction jouer( ) : 

jouerO { 
document. getEl ementBy Id ("nom"). style. backgroundCol or="white"; 
var nom=document. getEl ementBy Id( "nom") .value; 
if (nom==""){ 

document. getEl ementBy Id ("nom"). style. backgroundCol or=" red"; 
alertC'Attention : vous devez saisir votre nom avant de jouer"); 
return null ; 
} 
... // reste de la fonction jouer 
} 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer le 
fichier fonctionsMachine.js et tester le nouveau systeme dans un navigateur. 



Test du systeme 



Sous Dreamweaver, ouvrez la page i ndex . html dans le navigateur Firefox en appuyant sur 
la touche F12. Ne saisissez pas votre nom et appuyez directement sur le bouton JOUER. 
Des que le bouton est actionne, le champ de saisie doit changer de couleur et devenir 
rouge (voir repere 2 de la figure 10-7) puis une boite d'alerte doit apparaitre pour vous 
indiquer que le champ nom est obligatoire (voir repere 1 de la figure 10-7). 
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Figure 10-7 
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Validez la boite d'alerte en appuyant sur le bouton OK puis saisissez maintenant votre 
nom dans le champ rouge. Cliquez de nouveau sur le bouton JOUER pour valider votre 
saisie. Le champ doit etre reinitialise en blanc et la requete doit etre envoyee normalement. 



Atelier 10-5 : double requete asynchrone avec actualisation 
automatique 

Composition du systeme 

L'objectif pedagogique de cet atelier est double : 

• apprendre a creer un systeme qui s'actualisera automatiquement avec des donnees 
issues du serveur sans qu'un evenement genere par l'utilisateur ne soit necessaire ; 

• savoir faire cohabiter deux requetes en parallele. 

Concretement, dans notre application de machine a sous, nous allons mettre en place un 
systeme qui affichera toutes les 6 secondes le cumul des gains du joueur tout en lui 
permettant de continuer a jouer avec l'application deja operationnelle de l'atelier precedent. 

Cette structure est composee : 

• d'une page HTML (1 ndex . html ) identique a celle de l'atelier precedent ; 



d'un fichier JS (fonctionsAjax.js) qui contiendra les fonctions communes a tous les 
moteurs Ajax ; 
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• d'un fichier JS (fonctionsMachine.js) qui contiendra les fonctions specifiques a 1' appli- 
cation Ajax de la machine a sous ; 

• d'un fichier serveur PHP (gainAleatoire.php) identique a celui de 1' atelier precedent ; 

• d'un nouveau fichier serveur PHP (gai nCumul . php) ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier precedent ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Parallelement au jeu tel qu'il fonctionnait dans l'atelier precedent, 1' interface compren- 
dra une nouvelle zone d'information indiquant le cumul des gains de l'utilisateur dont le 
nom figure dans le champ de saisie du formulaire. L'actualisation du cumul des gains 
etant realisee automatiquement, l'utilisateur n'aura pas a s'en preoccuper. Toutes les 
6 secondes cette information s'actualisera par rapport au cumul des gains de l'utilisateur 
conserve cote serveur dans une variable de session. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 10-4 (i ndex . html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chaplO/atelierlO-5/. Copiez ensuite les autres 
fichiers de l'atelier precedent dans ce nouveau dossier. 

Pour realiser ce nouveau systeme, nous allons devoir mettre en place un second moteur 
Ajax cote client et un autre fichier serveur en PHP avec lequel le moteur communiquera. 

Commencons par creer les fonctions de ce deuxieme moteur Ajax. II sera structure de la 
meme maniere que le premier moteur, a savoir une fonction de declenchement du moteur 
nominee cumul ( ) qui creera l'objet XHR puis enverra la requete au serveur et une autre de 
rappel, nominee actual i serCumul ( ), qui sera automatiquement sollicitee lorsque la reponse 
du serveur sera receptionnee. 

Ces deux fonctions etant specifiques au systeme de la machine a sous, nous allons done 
les ajouter a la suite des fonctions du fichier fonctionsMachine.js. Les instructions de la 
fonction cumul ( ) seront tres semblables a celle de la fonction jouert ) au detail pres que 
l'objet XHR cree portera un nom different (objetXHR2) pour eviter les conflits avec le 
premier objet. 

objetXHR2 = creationXHR( ) ; 

De meme, pour connaitre le cumul des gains d'un joueur, nous aurons besoin d'envoyer 
au serveur le nom du joueur en parametre. Nous aurons done, ici aussi, une similitude 
avec la fonction jouerO pour la preparation des parametres et leur integration dans la 
methode openO de l'objet. Anoterque, cette fois, le fichier serveur ne sera plus gainAlea- 
toi re . php mais gai nCumul . php (nous developperons ce nouveau fichier PHP plus tard). 

var temps = new Date( ) .getTime( ) ; 

var parametres = "nom="+ codeContenu( "nom") + 

"&anticache="+temps ; 
objetXHR2. open ("get" , "gai nCumul .php?"+parametres, true) ; 
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La fonction de rappel portant le nom actual iserCumul ( ), nous allons devoir declarer cette 
information avant d'envoyer la requete. Pour cela, il suffit d'affecter le nom de cette fonction 
de rappel a la propriete onreadystatechange de l'objet. 

objetXHR2.onreadystatechange = actual iserCumul ; 

Pour signaler a l'utilisateur que le moteur est en communication avec le serveur, nous 
utiliserons aussi la meme animation que dans l'autre moteur, elle sera simplement 
personnalisee par un identifiant different (charge2). Cette animation devant apparaitre au 
moment de l'envoi de la requete, nous insererons ici une instruction qui permettra de 
changer la propriete vi si bi 1 i ty de son style afin de rendre visible cette seconde animation. 

document. get Element By Id ("charge2") .style. vis ibil ity=" visible" ; 

Apres tous ces preparatifs, nous pouvons maintenant envoyer la requete au serveur en 
utilisant la methode send( ) appliquee a objetXHR2. 

objetXHR2.send(null); 

Pour actualiser periodiquement la valeur du cumul, nous allons devoir maintenant ajouter 
une instruction que nous n'avions pas dans la precedente fonction jouerO. II s'agit de 
l'instruction setTimeout( ) qui appellera la fonction cumul ( ) (definie dans le premier para- 
metre), dans laquelle se trouve l'instruction elle-meme, au bout d'un temps de 6 secondes 
(definie dans le second parametre : 6000 millisecondes). 

setTimeoutt "cumul ()",6000) ; 

Ainsi, il suffira d'appeler une premiere fois la fonction cumul ( ) pour que le systeme soit 
autonome et que la fonction cumul ( ) soit executee toutes les 6 secondes. Pour realiser cet 
appel initial, nous allons placer cumul ( ) a la fin de la fonction testerNavigateur( ) qui est, 
elle-meme, appelee lors du chargement de la page par le gestionnaire d'evenement 

onload. 

function testerNavigateurO { 

cumul () ; 

} 

Au terme de votre saisie, la fonction cumul () doit etre semblable au code 10-11 (nous 
avons mis en gras les instructions qui different de la fonction jouer( ) du premier objet). 

Code 10-1 1: fonction cumul ( ) : 

function cumul () { 
objetXHR2 = creationXHRC ) ; 
var temps = new DateO .getTimeO; 
var parametres = "nom="+ codeContenut "nom" ) + 

"&anti cache="+temps ; 
objetXHR2. open ("get" , "gainCumul .php?"+parametres, true) ; 
objetXHR2. onreadystatechange = actualiserCumul ; 
document. get El ementBy Id ("charge2" ) .style. vi si bility=" visible" ; 
objetXHR2.send(nul 1 ) ;//envoi de la requete 
// 

setTimeoutC'cumul ()",6000);//timer de 6 secondes 

} 

Nous allons passer maintenant a la construction de la fonction de rappel de ce deuxieme 
objet XHR2. Ici aussi, bon nombre d' instructions seront communes a la fonction de 
rappel du premier objet XHR (actualiserPageO). Commencons par mettre en place la 
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declaration de la fonction actual i serCumul () et les deux tests if() qui permettront 
d'executer les instructions qui suivent lorsque le resultat sera disponible dans le naviga- 
teur (readyState==4) et que nous aurons verifie que le transfert HTTP se sera deroule 
correctement (status==200). 

I function actual iserCumul ( ) { 
if (objetXHR2.readyState == 4) { 
if (objetXHR2. status == 200) { 

Pour l'africhage du cumul des gains, nous nous contenterons d'afficher sa valeur sans 
rappeler le nom du joueur auquel il correspond. Nous n' aurons done besoin que d'un seul 
resultat dans la reponse, que nous recupererons dans une variable nommee cumul Gain. 

var cumulGain = objetXHR2.responseText; 

Une fois le resultat connu, nous devons actualiser sa valeur dans la balise <span> qui lui 
est attribute (identifiant cumul). Pour cela, nous utiliserons la fonction remplacerContenuO 
que nous avions developpee dans un atelier precedent. 

remplacerContenu( "cumul " , cumulGain) ; 

De meme, le transfert HTTP etant maintenant termine, nous devons rendre invisible 
1' animation du deuxieme chargement. 

document. get Element By Id ("charge2") . style. vi si bil ity=" hidden" ; 

La fonction de rappel de 1' application d'actualisation du cumul est maintenant terminee 
et devrait etre semblable au code 10-12 (nous avons mis en gras les instructions qui different 
de la fonction actual iserPageO du premier objet). 

Code 10-12 : fonction actual iserCumul () : 

function actual iserCumul ( ) { 

if (objetXHR2.readyState == 4) { 
if (objetXHR2. status == 200) { 
var cumulGain = objetXHR2.responseText; 
rempl acerContenu( "cumul " , cumulGain) ; 
document. getElementBy!d( "charge2" ) .style.visibil ity=" hidden" ; 



} 

Les deux fonctions du nouveau moteur etant terminees, vous pouvez enregistrer votre 
fichier fonctionsMachine.js et ouvrir maintenant le fichier index.html dans lequel nous 
allons preparer la zone d'affichage du cumul et son animation de chargement. 

En mode Code, ajoutez une nouvelle balise <div> a la suite de la balise du formulaire en 
utilisant le code ci-dessous. 



<d 



<div id="zoneCumul ">Votre cumul des gains est de <span id="cumul" >0 
</span> Euros </div> 



Vous remarquerez que l'identifiant de cette nouvelle balise <di v> est zoneCumul (nous en 
aurons besoin prochainement pour parametrer son style qui positionnera la balise dans 
la page Web). De meme, cette balise <div> comprend elle-meme une balise <span> 
d'identifiant cumul qui contiendra par la suite la valeur du cumul des gains renvoyee par 
le serveur. 
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Placez ensuite le code de la seconde animation de chargement apres celle deja en place 
dans la page. 

|<img id="charge" src="chargeur.gif " /> 
<img id="charge2" src="chargeur.gif" /> 

Enregistrez les modifications de la page index.html. Nous allons maintenant passer aux 
parametrages des styles des elements que nous venons d'ajouter. Pour cela, ouvrez la 
feuille de styles style. ess et saisissez les nouveaux styles suivants a la suite des regies 
deja en place (code 10-13). 

Code 10-13 : regies de styles a aj outer dans style. ess : 

#zoneCumul { 

position: absolute; 

left: 40px; 

top: 180px; 

width: 530px; 

height: 25px; 
} 
#cumul { 

font-weight:bold; 
} 
#charge2 { 

position: absolute; 

left: 470px; 

top: 180px; 

visibility: hidden; 
} 

La premiere regie de style #zoneCumul permet de positionner la zone dans laquelle figurera 
le texte d'information et la valeur du cumul d'une maniere absolue par rapport au conte- 
neur #page. II en sera de meme pour #charge2 qui correspond au positionnement de la 
seconde animation de chargement mais pour lequel nous ajouterons en plus une directive 
qui la rendra initialement invisible (visibility: hidden). Enfin, le style #cumul permet 
d'afficher en gras la valeur du cumul pour bien la mettre en evidence. Une fois la saisie 
terminee, enregistrez votre fichier et revenez eventuellement a la page index.html en 
mode Creation pour constater 1' incidence de ces styles sur la disposition des elements 
dans la page (attention, 1' animation de chargement etant configured par defaut comme 
invisible, il faudra changer la valeur de sa propriete a vi si bl e si vous desirez la voir appa- 
raitre pour vos verifications). 

II est maintenant grand temps de passer du cote serveur. Cependant, avant de creer le 
nouveau fichier qui va gerer les requetes de ce second moteur, nous allons ouvrir le fichier 
gainAleatoire.php afin d'ajouter les instructions qui permettront de memoriser le cumul 
des gains dans des variables de session. 

En PHP, des lors que vous utilisez des variables de session (que ce soit pour les creer, les 
modifier ou les utiliser) il faut aj outer la fonction session_start() au debut du code. Cette 
fonction permet d'activer la gestion des sessions dans la page et de pouvoir ainsi les 
manipuler comme de simples informations stockees dans un tableau de variables (tableau 
$_SESSI0N). 

|<?php 
session_start() ; 
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Le calcul du cumul sera tres facile a mettre en ceuvre, car nous utiliserons un simple 
operateur d' affectation (+=) dans sa forme compacte qui permet d'ajouter la valeur situee 
a droite (soit $gain) a la valeur actuelle de celle de gauche (soit le cumul stocke dans 
$_SESSION[$nom]) avant d'effectuer 1' affectation habituelle (revoir si besoin le chapitre sur 
les ressources PHP a la fin de cet ouvrage). Nous ajouterons done cette instruction juste 
apres le calcul du gain comme l'illustre le code ci-dessous. 

|$gain = rand(0,100) ; 
$_SESSION[$nom]+=$gain; 

Ainsi, a chaque fois qu'un utilisateur jouera, son nouveau gain sera cumule dans une 
variable de session dont la cle sera son nom. Nous pourrons, avec cette technique, avoir 
plusieurs variables de session si au cours de la meme session plusieurs joueurs differents 
utilisent 1' application (par exemple : $_SESSION['Def ranee'] et $_SESSION['Dupond']). 

Enregistrez ce fichier et ouvrez maintenant une nouvelle page PHP que vous allez 
nommer gainCumul .php. Nous commencerons par ajouter la fonction session_start() 
en debut du fichier de sorte a pouvoir acceder a la valeur des cumuls mise a jour par le 
precedent fichier. 

session_start() ; 

Pour la suite, la structure de la page sera semblable a celle du premier fichier serveur 
(revoir si besoin les explications de chacune de ces lignes dans les ateliers precedents). 

header("Content-Type: text/plain ; charset=utf-8" ) ; 
headerC'Cache-Control : no-cache , private"); 
header( "Pragma: no-cache"); 
sleep(2); 

La requete du second moteur Ajax envoyant le nom du joueur avec le meme parametre 
(nom), nous aurons de la meme maniere besoin d'une structure de test semblable a celle 
du premier fichier pour recuperer cette information dans une variable locale $nom. 

Iif(isset($_REQUEST['nom'])) $nom=$_REQUEST[ 'nom'] ; 
else $nom="inconnu" ; 

Comme nous disposons maintenant du nom du joueur et que l'acces aux variables de 
session a ete active, nous pouvons recuperer la valeur du cumul des gains par une simple 
affectation. 

$resultat = $_SESSION[$nom] ; 

Toutefois, pour eviter des messages d'erreur dans le cas ou la variable de session de 
l'utilisateur n'existe pas, nous conditionnerons cette affectation par un test if ( ) utilisant 
la fonction i sset( ) (retourne true si la variable contenue dans son parametre existe). Si le 
test se revelait negatif nous affecterions alors la valeur zero au resultat grace a la structure 
else qui complete celle du i f ( ). 

Iif(isset($_SESSION[$nom])) Sresultat = $_SESSION[$nom] ; 
else $resultat=0; 

Le traitement etant termine, le resultat est pret a etre renvoye au navigateur. Pour cela, il 
suffit de l'afficher a l'aide d'une simple fonction echo. 

echo Sresultat; 

Apres la saisie de ces instructions, le contenu du fichier gai nCumul . php doit etre semblable 
au code 10-14. 
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; charset=utf-8" ) ; 
private") ; 



Code 10-14 : fonction gainCumul .php 

session_start() ; 

header( "Content-Type: text/plain ; 

header( "Cache-Control : no-cache 

header( "Pragma : no-cache"); 

sleep(2); 

if(isset($_REQUEST['nom'])) $nom=$_REQUEST['nom']; 

else $nom="inconnu" ; 

if(isset($_SESSION[$nom])) $resultat = $_SESSI0N[$nom] ; 

else $resultat=0; 

echo $resultat; 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer vos 
fichiers et tester le nouveau systeme dans un navigateur. 



Test du systeme 



Sous Dreamweaver, ouvrez la page i ndex . html dans le navigateur Firefox en appuyant sur 
la touche F12. Des le chargement de la page, les requetes d'actualisation du cumul des 
gains commencent a sollicker le fichier gainCumul .php toutes les 6 secondes. Les differen- 
tes requetes envoy ees sont facilement identifiables grace au chargeur du cumul qui s'affi- 
che pendant le temps de traitement a droite de la zone d'affichage du cumul des gains 
(voir repere 2 de la figure 10-8). Cependant, comme le nom du joueur n'a pas encore ete 
saisi, le resultat renvoye est toujours egal a zero. 

Saisissez maintenant votre nom dans le champ correspondant et cliquez sur le bouton 
JOUER. Apres le traitement de votre requete, le nouveau gain precede de votre nom doit 
alors s'afficher dans la zone de resultat comme dans les ateliers precedents. Des lors, la 
prochaine requete d' actualisation du cumul renverra cette valeur dans la zone d' affichage 
du cumul des gains en dessous du formulaire (voir repere 2 de la figure 10-8). Si vous 
renouvelez votre action sur le bouton JOUER, une nouvelle valeur de gain s'affichera 
dans la zone de resultat et la requete d'actualisation du cumul qui suivra, renverra cette 
fois la somme des deux gains realises (voir repere 1 de la figure 10-8). 



Figure 10-8 
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Bravo, M Defrance vous avez gagne 32 Euros 



Indiquez votre nom : Defrance 



avant de UjquerII 



1 2 

Votre cumul des gains est d| 84 §urc 
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Jusqu'a maintenant, nous avons realise des requetes Ajax avec la methode GET. Cepen- 
dant, le format d'URL etant impose et le nombre de caracteres envoyes par cette methode 
etant limite, il devient alors vite interessant d'utiliser la methode POST si vous desirez 
envoyer des donnees volumineuses dans un autre format que l'encodage d'URL (XML 
ou JSON par exemple). 

Pour vous initier a ces differentes techniques d'envoi de parametres avec la methode POST, 
nous allons maintenant les illustrer en reprenant a chaque fois la meme application de la 
machine a sous que dans le chapitre precedent mais avec cette fois deux parametres a 
envoyer (nom et prenom). 

Atelier 11-1 : requete asynchrone POST avec un champ texte 
Composition du systeme 

Pour bien comprendre les differences entre une application Ajax utilisant la methode GET 
et une autre utilisant la methode POST, nous allons realiser, pour commencer, la meme 
application que dans l'atelier 10-4 mais avec deux champs de saisie (nom et prenom) et 
1' utilisation de la methode POST pour envoyer la requete au serveur. 

Cette structure est composee : 

• d'une page HTML (index.html) dont la structure est identique a cellede l'atelier 10-4 ; 

• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (fonctionsMachine. js) qui contient les fonctions specifiques a l'application 
Ajax de la machine a sous, dont la structure de base avant modification est identique a 
celle de l'atelier 10-4 ; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celle de 
l'atelier 10-4 mais qui est modifie pour gerer les deux parametres de la requete POST ; 
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• d'une feuille de styles (styl e . ess) identique a celle de l'atelier 10-4 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement est semblable a celui de l'atelier 10-4 hormis le fait que dans cet 
atelier, il faut saisir le prenom en plus du nom et que 1' envoi de la requete va se faire avec 
la methode POST et non plus GET comme dans le chapitre precedent. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 10-4 (i ndex . html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chapll/atel ierll-1/. Copiez ensuite les autres 
fichiers de l'atelier precedent dans ce nouveau dossier. 

Avant de modifier les scripts, nous devons ouvrir le fichier index.html et ajouter un 
champ de saisie supplementaire pour le prenom. Pour cela, passez en mode Creation et 
faites glisser un champ de saisie dans le formulaire depuis l'onglet Formulaire de la barre 
d'outils Insertion situee en haut de l'interface de Dreamweaver. Nommez ensuite ce 
nouveau champ prenom a l'aide du panneau Proprietes, apres l'avoir selectionne. 

Pour transformer notre requete GET en une requete POST, nous allons devoir modifier 
le code de la fonction jouer( ) qui declenche l'envoi de la requete. Ouvrez pour cela le 
fichier fonctionsMachine. js et localisez la fonction jouer( ) dans le code de la page. Avec 
la methode POST, il n'est plus utile de se premunir contre un eventuel probleme de cache 
car il est gere differemment par les navigateurs lorsque la requete est envoyee en POST. 
Nous allons done supprimer la ligne qui permet de calculer la variable temps et de 1' ajou- 
ter a la suite du parametre d'URL. Par contre, comme nous avons desormais un second 
champ prenom a gerer, il faut ajouter sa valeur aux parametres envoyes en respectant la 
syntaxe de l'encodage d'URL de sorte a avoir au final une chaine de caracteres semblable 
a celle de l'exemple ci-dessous : 

nom=Def rance&prenom=Jean-Marie 

Nous realisons cette chaine par concatenation a l'aide de 1' instruction suivante puis nous 
allons l'affecter a la variable parametres : 

var parametres = "nom="+ codeContenu("nom")+"&prenom="+ codeContenuC'prenom") ; 

Desormais, la variable parametres doit contenir les couples de variables nom et prenom 
separees de leur valeur par un signe egal et relies entre eux par une esperluette (&). 

La methode open ( ) de l'objet XHR doit evidemment etre modifiee de sorte a indiquer que 
nous allons envoyer les parametres avec POST et non plus GET. De meme, les parametres 
n'etant plus envoyes dans l'URL (comme e'etait le cas en GET) il n'est done plus utile de les 
ajouter a la suite du nom du fichier serveur. Les deux premiers arguments de la methode 
open( ) doivent done etre modifies en rapport, ce qui donne l'instruction suivante : 

objetXHR. open ("post" , "gainAleatoire.php" , true) ; 

Avec la methode POST, les donnees sont envoyees dans le corps de la requete et il convient 
d' ajouter un en-tete supplementaire nomme Content- Type pour indiquer le type du 
contenu qui va etre envoye au serveur. Habituellement dans un formulaire POST traditionnel, 
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c'est le navigateur qui se charge de transmettre cette information au serveur automatique- 
ment des que le formulaire est valide. La valeur envoyee comme type de contenu par le 
navigateur est alors la suivante : 

appl i cati on/x-www-f orm-url encoded 

Nous allons done devoir envoy er la meme information dans le cas de notre requete Ajax. Pour 
cela nous allons utiliser la methode setRequestHeader( ) de l'objet XHR qui permet de confi- 
gurer des en-tetes de la requete Ajax en indiquant le nom de l'en-tete a creer dans le premier 
argument et la valeur a lui affecter dans le second comme l'illustre l'instruction ci-dessous : 

objetXHR. setRequestHeaderC "Content-Type" , "appl i cati on/x-www-f orm-url encoded" ) ; 

II ne reste plus maintenant qu'a inserer les parametres a envoyer dans 1' argument de la 
methode send( ). Comme nous avons deja prepare ces parametres dans la variable parametres, 
il suffit simplement d'indiquer son nom dans l'argument de la fonction. 

objetXHR. send(parametres) ;//envoi de la requete 

Code 1 1-1 : Code complet de la fonction jouer( ) apres nos modifications (les modifications 
a apporter au code du chapitre precedent sont indiquees en gras) : 

function jouerO { 

objetXHR = creationXHRO; 

var parametres = "nom="+ codeContenu("nom")+"&"+"prenom="+ codeContenuC'prenom") ; 

objetXHR. open ("post" , "gainAleatoire.php" , true) ; 

objetXHR. onreadystatechange = actualiserPage; 

objetXHR. set RequestHeader( "Content-Type", "appl i cati on/x-www-f orm-url encoded"); 

document. getElementBy Id ( "button" ) .disabled^ true; 

document. getElementBy Id ( "charge" ) .style.visibil ity=" visible" ; 

objetXHR. send(parametres) ;//envoi de la requete 
} 

La modification du fichier fonctionsMachine.js est terminee, vous pouvez maintenant 
l'enregistrer et ouvrir le fichier serveur gai nAl eatoi re . php afin de le modifier pour gerer 
le second parametre prenom envoye dans la requete. Pour cela nous allons devoir ajouter 
une seconde instruction de recuperation de parametre HTTP dans la variable $ ^REQUEST. 

if (i sset($_REQUEST[ 'nom' ] ) ) $nomJoueur=$_REQUEST[ 'nom' ] ; 

else $nomJoueur="inconnu" ; 

if (isset($_REQUEST[ 'prenom'])) $prenomJoueur=$_REQUEST[ 'prenom']; 

else $prenomJoueur="inconnu"; 

Remarquez au passage que nous avons renomme les variables locales en SnomJoueur et 
SprenomJoueur de sorte a pouvoir utiliser $nom pour memoriser la concatenation de ces 
deux donnees comme l'illustre le code ci-dessous. Ainsi, desormais nous retournons au 
navigateur une chaine de caracteres contenant le nom et le prenom du joueur et non 
uniquement son nom comme dans le chapitre precedent. 

$nom=$prenomJoueur." ".$nomOoueur; 

Le reste du code reste inchange et une fois modifie, le fichier gai nAl eatoi re .php doit etre 
semblable au code 11-2. 

Code 11-2 : fichier gainAleatoire.php : 

I header( "Content-Type: text/plain ; charset=utf-8" ) ; 
headert "Cache-Control : no-cache , private"); 
header( "Pragma : no-cache"); 
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sleep(2); 

if(isset($_REQUEST['nom'])) $nomJoueur=$_REQUEST['nom' ] ; 

else $nomJoueur="inconnLT ; 

i f ( i sset( $_REQUEST[ 'prenom' ] ) ) $prenomOoueur=$_REQUEST[ ' prenom' ] ; 

else $prenomJoueur="inconnu"; 

$gain = rand(0,100) ; 

$nom=$prenomJoueu.r." ".$nomJoueur; 

$ result a t=$nom. ' : ' ,$gain; 

echo $resultat ; 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 



Test du systeme 



Dans Dreamweaver, ouvrez la page index.html dans le navigateur Firefox en appuyant 
sur la touche F12. Le fonctionnement du nouveau systeme doit etre semblable a celui de 
l'atelier 10-4, sauf que cette fois vous devez saisir votre prenom en plus du nom et que les 
parametres sont envoyes avec la methode POST et non GET. 

Pour observer les transferts de donnees entre le navigateur et le serveur, activez Firebug 
et cliquez sur l'onglet Console. Effacez les differents enregistrements precedents (s'il y 
en a) en utilisant la fonction Clear du menu puis cliquez de nouveau sur le bouton 
JOUER. La requete POST du fichier PHP doit apparaitre dans la fenetre de Firebug, 
cliquez sur le + qui precede ce fichier pour le derouler, puis sur l'onglet Post pour voir 
apparaitre la valeur du champ nom qui a ete envoyee au serveur (voir figure 1 1-1). Vous 
pouvez ensuite visualiser les donnees renvoyees par le serveur en cliquant sur l'onglet 
Response, mais elles sont semblables a celles que nous avons eu jusqu'a present hormis 
que cette fois le prenom du joueur est attache a son prenom (par exemple Jean-Marie 
Defrance : 95). 
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Bravo, M Jean-Marie Defrance vous avez gagne 20 Euros 
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Figure 11-1 

Test d'une requete asynchrone POST avec des parametres au format texte 
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Atelier 11-2 : requete asynchrone POST avec parametres 
en XML 

Composition du systeme 

Avec une requete Ajax utilisant la methode POST, nous ne sommes plus limite par la taille 
des parametres a envoyer au serveur. De meme, le type de donnees envoyees pouvant etre 
configure par un en-tete specifique, nous pouvons maintenant envoyer autre chose que 
des donnees encodees en URL (couples de variable/valeur separees par une esperluette) 
comme nous l'avons fait jusqu' a present. 

Nous allons done consacrer ce nouvel atelier a la mise en oeuvre d'un systeme qui 
permettra d' envoyer au serveur des donnees au format XML. Notre exemple reste tres 
simple car nous n' envoy ons que deux parametres (le nom et le prenom du joueur) mais 
par la suite, vous pouvez aussi utiliser cette technique pour envoyer un grand nombre 
d' informations de la meme maniere. 

Le premier interet d' utiliser des parametres au format XML est de ne plus etre limite par 
la taille des informations transmises au serveur, mais cette technique a aussi l'avantage 
de hierarchiser les donnees envoyees et constitue done une bonne solution pour integrer 
des donnees complexes dans une requete Ajax. 

Cette structure est composee : 

• d'une page HTML (1 ndex . html ) identique a celle de l'atelier 11-1; 

• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (fonctionsMachine.js) qui contient les fonctions specifiques al'application 
Ajax de la machine a sous dont la structure de base avant modification est identique a 
celle de l'atelier 11-1 ; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celle de 
l'atelier 11-1 mais qui est modifiee pour gerer le document XML envoye en parametre 
de la requete POST ; 

• d'une feuille de styles (style. ess) identique a celle de l'atelier 11-1 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement est semblable a celui de l'atelier precedent hormis le fait que les para- 
metres de la requete vont etre envoyes au format XML. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 11-1 precedent (index.html) et sauvegardez-la sous le 
meme nom dans un nouveau repertoire nomme /chapll/atel ierll-2/. Copiez ensuite les 
autres fichiers de l'atelier precedent dans ce nouveau dossier. 
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Pour transformer notre requete POST et envoyer cette fois des donnees XML, nous allons 
devoir commencer par modifier le code de la fonction jouer( ) qui declenche l'envoi de la 
requete. 

Ouvrez le fichier fonctionsMachine. js et localisez la fonction jouer( ) dans le code de la 
page. Nous devons remplacer dans cette fonction 1' affectation actuelle de la variable 
parametres (valeurs de nom et de prenom encodees en URL) par un document XML 
constitue d'un element racine <joueur> et de deux elements enfants <nom> et <prenom>. 
Dans ce premier atelier sur l'envoi de parametres en XML, nous allons simplement construire 
le document XML par concatenation de balises en y integrant les valeurs saisies dans les 
champs du formulaire comme contenu des elements <nom> et <prenom> (voir code 11-3). 
Cependant, nous allons voir dans le prochain atelier une seconde technique qui consiste 
a utiliser les methodes et proprietes du DOM pour creer un arbre XML puis a le serialiser 
pour ensuite 1' envoyer au serve ur. 

Code 11-3: creation du document XML qui va etre envoye en parametre de la requete : 

var parametresXml = 
"<joueur>" + 

"<nom>" + codeContenuC'nom") + "</nom>" + 

"<prenom>" + codeContenuC'prenom") + "</prenom>" + 
"</joueur>" ; 

La methode openO de l'objet XHR ne necessite aucune modification car, comme dans 
l'atelier 11-1, nous allons envoyer une requete Ajax asynchrone, avec la methode POST et 
au meme fichier serveur. 

objetXHR. open ("post" , "gainAleatoire.php" , true) ; 

En revanche, le type de donnees envoy ees change et il faut done modifier l'en-tete 
nomme Content-Type, que nous avions ajoute dans l'atelier precedent, pour indiquer que 
le type du contenu envoye avec la requete POST est cette fois du XML : 

objetXHR. set RequestHeadert "Content-Type", "text/xml") ; 

Comme le transfert est encore realise avec POST, les parametres a envoyer, qu'ils soient 
encodes en URL ou au format XML, sont toujours inseres dans 1' argument de la methode 
sendO grace a la variable parametresXml initialisee precedemment ; la configuration de 
cette methode reste done la meme : 

objetXHR. send(parametresXml ) ;//envoi de la requete 

Code 11-4 : Code complet de la fonction jouer( ) apres nos modifications (les modifications 
a apporter par rapport au code de l'atelier precedent sont indiquees en gras) : 

function jouerO { 
objetXHR = creationXHRO; 
var parametresXml = 
"<joueur>" + 

"<nom>" + codeContenuC'nom") + "</nom>" + 
"<prenom>" + codeContenuC'prenom") + "</prenom>" + 
"</joueur>"; 
objetXHR. open ("post" ."gainAleatoi re.php" , true) ; 
objetXHR. onreadystatechange = actualiserPage; 
objetXHR. setRequestHeader( "Content-Type" , "text/xml") ; 
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//gestion du bouton et du chargeur 
document. getElementBy Id ( "button") .disabled^ true; 
document. get Element By Id ( "charge") .style. vis ibil ity=" visible" ; 
//envoi de la requete 
objetXHR.send(parametresXml ) ; 
} 

La modification du fichier fonctionsMachine.js est terminee, vous pouvez maintenant 
l'enregistrer et ouvrir le fichier serveur gainAleatoire.php pour l'adapter aux nouvelles 
donnees envoyees en XML par le moteur Ajax. 

Dans ce fichier PHP, nous allons devoir traiter les donnees du document XML et il faut 
commencer avant tout par recuperer ses informations. Or, contrairement a l'envoi de 
donnees encodees en URL qui pouvaient etre recuperees a l'aide de variables HTTP 
(comme $_REQUEST, $_GET ou $_P0ST selon la methode employee), un document XML ne 
peut pas etre formate de la sorte. En effet, le format XML est complexe et ne peut pas etre 
decompose dans un tableau de variables HTTP comme le sont les simples donnees 
HTTP. Nous devons done recuperer le document XML complet et sans mise en forme 
prealable. Pour cela, nous allons utiliser la fonction file_get_contents() appliquee au 
flux d'entree php: //input qui permet de lire des donnees POST bruts. De cette maniere le 
document XML est enregistre dans la variable SparametresXml sans alterations : 

$parametresXml = file_get_contents( 'php://1nput') ; 

Pour traiter le document XML ainsi recupere, nous allons utiliser les methodes de l'objet 
SimpleXML. Mais avant cela, il faut commencer par creer un objet XML au moyen de 
1' instruction ci-dessous : 

$objetSimpleXML=simplexml_load_string($parametresXml ) ; 

Une fois l'objet cree, il est facile d'acceder a ses proprietes correspondant aux contenus 
des elements du document XML a l'aide des instructions suivantes : 

I$nomJoueur=$objetSimpl eXML->nom; 
$prenomJoueur=$objetSimpleXML->prenom; 

Des que les donnees sont isolees dans ces variables, il ne reste plus qu'a appliquer la 
me me procedure de concatenation que dans 1' atelier precedent pour mettre en forme le 
resultat avant de le retourner au navigateur. 

I$nom=$prenomJoueur." ".$nomJoueur; 
$resultat=$nom. ' : ' .$gain; 

Apres sa modification, le code du fichier gainAleatoire.php doit etre semblable au 
code 1 1-5 ci-dessous. 

Code 11- 5 : Instructions du fichier gainAleatoire.php : 

//simulation du temps d'attente du serveur (2 secondes) 

sleepC2); 

//recuperation des parametres au format XML 

$parametresXml = file_get_contents( 'php://input') ; 

//creation d'un objet Simple Xml a partir des parametres recuperes 

$objetSimpleXML=simplexml_load_string($parametresXml ) ; 

//recuperation du nom du joueur 

$nomJoueur=$objetSimpleXML->nom; 

//recuperation du prenom du joueur 

$prenomJoueur=$objetSimpleXML->prenom; 

//calcul du nouveau gain entre et 100 Euros 
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$gain = rand(O.lOO) ; 

//concatenation du nom 

$nom=$prenomJoueur." ".$nomJoueur; 

//ml se en forme du resultat avec le nom 

$resultat=$nom. ' : ' . $ g a i n ; 

//envoi de la reponse au navigateur 

echo Sresultat; 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 



Test du systeme 



Dans Dreamweaver, ouvrez la page index.html dans le navigateur Firefox en appuyant 
sur la touche F12. Saisissez vos nom et prenom dans les deux champs du formulaire puis 
cliquez sur le bouton JOUER. L' application doit alors transmettre le document XML 
dans lequel ont ete integrees les informations saisies et 1' animation doit apparaitre pour 
vous signaler que le traitement est en cours. Au terme du traitement, vos nom et prenom 
doivent s'afficher dans la fenetre des resultats suivis du nouveau gain obtenu. 

Pour observer les transferts de donnees entre le navigateur et le serveur, activez Firebug 
et cliquez sur l'onglet Console. Effacez les differents enregistrements precedents a l'aide 
de la fonction Clear du menu puis cliquez de nouveau sur le bouton JOUER. L' envoi de 
la requete POST au fichier PHP doit apparaitre dans la fenetre de la console Firebug, 
cliquez sur le + qui precede ce fichier pour le derouler, puis sur l'onglet Post pour voir 
apparaitre le document XML qui a ete envoye au serveur (voir figure 1 1-2). Vous pouvez 
ensuite visualiser les donnees renvoyees par le serveur en cliquant sur l'onglet Response 
mais elles sont semblables a celles que nous avons obtenues jusqu'a present. 




Bravo, M Jean-Marie Defrance vous avez gagne 84 Euros 
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Figure 11-2 

Test d'un transfert Asynchrone avec des parametres XML 
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Atelier 11-3 : requete asynchrone POST avec parametres 
issus d'un arbre DOM XML 

Composition du systeme 

Dans 1' atelier precedent, nous avons mis en oeuvre un systeme exploitant un document 
XML pour envoyer des informations au serveur lors de remission de la requete mais 
pour simplifier notre application, le document XML a ete cree par une simple concatenation 
de balises et de leurs contenus. 

En pratique, il est souvent utile de pouvoir recuperer les informations d'un arbre XML 
construit a l'aide de methodes du DOM. Cela permet par exemple d'enregistrer les 
actions de l'utilisateur en reliant un evenement particulier a un script d'ajout ou de modi- 
fication d'un noeud de 1' arbre XML. 

Pour illustrer cette technique, nous vous proposons de mettre en oeuvre une application 
permettant d'utiliser des boutons pour preselectionner le nom du joueur au lieu de devoir 
saisir ses nom et prenom dans des champs de formulaire comme dans 1' atelier precedent. 

Cette structure est composee : 

• d'une page HTML (index.html) dont la base estidentique a celle de 1' atelier 11 -2 mais 
qui est modifiee afin d'ajouter des boutons pour la preselection des noms et prenoms 
du joueur ; 

• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (fonctionsMachine.js) qui contient les fonctions specifiques a 1' application 
Ajax de la machine a sous dont la structure de base avant modification est identique a 
celle de 1' atelier 11-2; 

• d'un fichier serveur PHP (gainAleatoi re. php) identique a celui de l'atelier 11-2 ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier 11-2; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

La page index, html contient cette fois deux boutons correspondant a des preselections de 
deux joueurs differents qui vont se substituer a la saisie des champs actuels du formu- 
laire. Chaque bouton est lie a un gestionnaire d'evenement onclick qui declenche un 
programme de creation d'un arbre DOM preconfigure avec le nom et le prenom du 
joueur. Lorsque le joueur clique ensuite sur le bouton JOUER, l'arbre precedemment 
cree est serialise puis envoye au serveur pour traitement. Le reste du systeme reste iden- 
tique a celui de l'atelier precedent. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 11-2 precedent (index.html) et sauvegardez-la sous le 
meme nom dans un nouveau repertoire nomme /chapll/atel ierll-3/. Copiez ensuite les 
autres fichiers de l'atelier precedent dans ce nouveau dossier. 

Commencez par remplacer les champs de saisie du nom et du prenom par les boutons de 
preselection. Pour cela, ouvrez la page index.html en mode Creation dans Dreamweaver 
et supprimez les deux champs de saisie. A l'aide de l'onglet Formulaire de la barre Inser- 
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tion, ajoutez ensuite deux boutons dans la zone de formulaire (voir repere 1 de la 
figure 11-3). Personnalisez ces boutons (renseignez le champ Valeur du panneau des 
proprietes de chaque bouton, voir repere 3 de la figure 11-3) avec les noms et prenoms 
des deux joueurs de votre choix, puis attribuez a chaque bouton un nom different (noml et 
nom2 par exemple, a saisir dans le champ du nom du bouton du panneau des Proprietes, 
voir repere 4 de la figure 11-3). Passez ensuite en mode Code et assurez-vous que les 
attributs id de chaque bouton ont bien ete configures avec noml et nom2 de sorte a pouvoir 
les referencer dans le gestionnaire d'evenement que nous allons mettre en place par la 
suite. Les modifications de la page index.html sont maintenant terminees : enregistrez-la 
avant de passer a la suite des modifications. 
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Figure 11-3 

Modification de la page index.html : ajout et configuration des boutons de preselection 



Maintenant que les boutons de preselection sont en place, nous allons passer a la configu- 
ration du gestionnaire d'evenement. Pour cela nous allons ouvrir le fichier foncti on- 
Machine . js et ajouter les deux declarations de gestionnaire ci-dessous a la fin de la fonction 
testerNavigateurO afin d'etre sur que les boutons concernes seront deja charges au 
moment de leur configuration. 

I document. get El ementBy Id ("noml") .onclick=function( ) (a jouteNomC'Def ranee", "Jean-Marie")} ; 
document, get Element By Id ( "nom2") .onclick=function( HajouteNomC'Dupond", "Alain")} ; 
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Ces declarations associent aux deux boutons un evenement onclick qui declenche la 
meme fonction a jouteNomt ) mais avec des parametres differents. En effet, meme si la syntaxe 
de 1' attribution de ces fonctions anonymes aux gestionnaires directement dans le code 
JavaScript peut paraitre un peu destabilisante par rapport a celles que nous avons utilisees 
jusqu'alors, elle a l'enorme avantage de pouvoir passer des parametres a la fonction asso- 
ciee a 1' evenement. Nous pouvons ainsi recuperer ces parametres dans la fonction appe- 
lee comme si nous les avions envoyes depuis une declaration de gestionnaire equivalente 
dans une page HTML semblable a celle du code ci-dessous : 

<input id="noml" onclick= ajouteNomC'Defrance", "Jean-Marie") ; ... > 

La fonction declenchee par une action sur l'un des deux boutons doit creer un arbre XML 
personnalise avec le nom et prenom de chaque joueur. Pour cela nous allons utiliser les 
methodes du DOM pour construire 1' arbre branche par branche et creer successivement les 
elements <nom> et <prenom> (avec createEl ementO) puis les noeuds texte (avec createText- 
Node( )) contenant les noms et prenoms des deux joueurs que nous allons associer ensuite 
ensemble avec la methode appendChildO. Enfin, les deux elements sont ensuite rattaches 
en tant qu'enfants a un element racine <joueur> en suivant la meme procedure que pour 
les noeuds texte. A noter que l'element el ementJoueur est declare comme variable globale 
(sans le prefixe var) afin de pouvoir en disposer dans les autres fonctions du moteur Ajax. 

Une fois terminee, la fonction de creation des documents XML personnalises a chacun 
des joueurs est semblable au code 11-6. 

Code 11-6 : fonction ajouteNotnO : 

function ajouteNom(nom, prenom) { 

//creation de l'element nom avec son noeud texte 
var elementNom=document.createElement( "nom" ) ; 
var texteNom=document.createTextNode(nom) ; 
elementNom.appendChild(texteNom) ; 
//creation de l'element Prenom avec son noeud texte 
var el ementPrenom=document. create Element ("prenom") ; 
var textePrenom=document . createTextNode(prenom) ; 
elementPrenom.appendChild(textePrenom) ; 
//creation du noeud racine joueur 
elementJoueur=document.createElement( "joueur" ) ; 
element Joueur. appendChild(element Nom) ; 
el ementJoueur. appendChild(elementPrenom) ; 
} 

Nous disposons maintenant du mecanisme de creation d'un arbre XML personnalise 
mais il nous reste a mettre en place le systeme de serialisation de cet arbre et son inser- 
tion en tant que parametres dans la methode sendO du moteur Ajax. Pour cela, nous 
allons modifier la fonction jouer( ) qui declenche l'envoi de la requete. 

Pour serialiser l'arbre XML el ementJoueur, nous allons utiliser des methodes compatibles 
avec les specifications du W3C. Nous devons commencer par creer un objet de la classe 
XMLSerializer puis ensuite utiliser 1' une de ses methodes serializeToStringO permettant 
de transformer notre arbre en un document XML equivalent mais constitue de chaines de 
caracteres. Le resultat de la serialisation est ensuite affecte a la variable parametresXml qui 
est elle-meme utilisee comme argument par la methode sendO lors de l'envoi des 
donnees au serveur. 

I var objetSerializer=new XMLSerializerO; 
var parametresXml = objetSerializer.serializeToString(elementJoueur); 
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Une fois terminee, la fonction jouer( ) est semblable au code 11-7 ci-dessous. 

Code 11-7 : Fonction jouerO : 

function jouerO { 
objetXHR = creationXHRO; 

//construction des donnees des parametres en XML 
var objetSerializer=new XMLSerializerO ; 

var parametresXml = objetSerializer.serializeToString(elementJoueur) ; 
//Config. objet XHR 

objetXHR. open ("post" , "gainAleatoire.php" , true) ; 
objetXHR. onreadystatechange = actual iserPage; 
objetXHR. set Request Header( "Content-Type" , "text/xml ") ; 
//gestion du bouton et du chargeur 
document. get Element By Id ("button" ) .disabled= true; 
document. get Element By Id ("charge") .style.visibil ity=" visible" ; 
objetXHR. sendtparametresXml ) ;//envoi de la requete 
} 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 

Test du systeme 

Dans Dreamweaver, ouvrez la page index.html dans le navigateur Firefox en appuyant 
sur la touche F12. Vous devez alors voir les deux boutons de preselection du joueur. 
Cliquez sur l'un d'entre eux pour choisir votre profil avant de cliquer sur le bouton 
JOUER. La requete doit alors etre envoyee au serveur (1' animation doit apparaitre a 
l'ecran pendant le temps de traitement) et le resultat du jeu doit s'afficher au bout de deux 
secondes, de la meme maniere que dans l'atelier precedent. 

Nous allons maintenant tester notre systeme avec le navigateur Internet Explorer. Utili- 
sez pour cela la methode de votre choix : bouton Apercu de Dreamweaver, nouvelle fene- 
tre IE ou bouton IE Tab place en bas de l'ecran dans Firefox. Une fois l'application char- 
gee dans IE (ou dans un IE emule par Firefox), renouvelez la meme procedure que 
precedemment pour tester le systeme. 

On decouvre alors que le systeme ne repond plus lorsqu'on appuie sur le bouton JOUER. . . 

D' autre part, si vous testez maintenant le systeme sur un serveur distant ne disposant pas de 
la version 5 de PHP, nous pouvons constater cette fois que notre systeme ne fonctionne 
plus, aussi bien avec IE qu'avec Firefox. . . 

Le prochain atelier sera consacre a la resolution de ces deux problemes pour lesquels 
nous allons vous presenter des solutions alternatives. 

Atelier 11-4 : requete asynchrone POST avec parametres 
issus d'un arbre DOM XML multi-navigateurs et compatible 
PHP 4 

Composition du systeme 

Dans l'atelier precedent, nous avons remarque que le systeme ne fonctionnait pas dans 
Wamp 5 avec le navigateur Internet Explorer, de meme qu'il etait impossible de porter 
notre application sur un serveur PHP 4 et cela quel que soit le navigateur utilise. 
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Le premier probleme est lie au fait que le navigateur IE n'est pas conforme au W3C et 
qu'il ne peut pas instancier la classe XMLSerializer comme Firefox le fait. Nous allons 
done modifier la procedure de serialisation de maniere a la rendre compatible avec les 
deux navigateurs. 

Le second probleme vient de l'utilisation des methodes de simpleXML qui sont disponibles 
uniquement depuis la version 5 de PHP. Pour faire fonctionner notre application en PHP 4, 
nous verrons dans cet atelier comment integrer un analyseur syntaxique XML en solution 
alternative a la classe simpleXML. 

Cette structure est composee : 

• d'une page HTML (index.html) identique a celle de l'atelier 11-3 ; 

• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (fonctionsMachine. js) qui contient les fonctions specifiques a l'applica- 
tion Ajax de la machine a sous dont la structure de base avant son adaptation a IE est 
identique a celle de l'atelier 11-3; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celle de 
l'atelier 11-3 mais qui est modifiee pour assurer la compatibilite avec le PHP 4 ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier 11-3; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du systeme est identique a celui de l'atelier precedent hormis le fait 
que 1' application est compatible avec tous les navigateurs et qu'elle est portable sur un 
serveur PHP 4. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 11-3 (index, html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chapll/atelierll-4/. Copiez ensuite les autres 
fichiers de l'atelier precedent dans ce nouveau dossier. 

Pour resoudre le probleme de compatibilite du processus de serialisation avec IE, nous 
pourrions mettre en ceuvre un detecteur de navigateur et appliquer le processus de seria- 
lisation adapte selon le type de navigateur (IE ou les compatibles W3C comme Firefox). 
En effet, si IE n'interprete pas la classe XMLSeri al i zer, il permet quand meme de serialiser un 
arbre XML en utilisant la propriete . xml appliquee a l'un de ses elements et nous pourrions 
utiliser cette technique en solution alternative si le navigateur IE etait detecte. 

Une autre solution consiste a utiliser une bibliotheque adaptee qui permettrait de seriali- 
ser le document XML sans se preoccuper du type de navigateur. Dans le cadre de cet 
atelier, nous allons opter pour cette seconde solution et utiliser la bibliotheque zXML. 



Bibliotheque zXML 

Auteur : Nicholas C. Zakas (Free Software GNU) 
Vous pouvez telecharger la bibliotheque zXML a I'adresse ci-dessous : 
http://www. nczonline. net/downloads/ 
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Pour mettre en place ce systeme, commencez par telecharger le fichier zxml . js de la 
bibliotheque zXML et placez-le dans le repertoire /chapll/atelierll-4/ de notre atelier. 
Pour disposer de cette bibliotheque dans notre application nous allons ensuite aj outer une 
balise <script> faisant reference a ce fichier dans labalise <head> de la page index.html. 

<script type="text/javascript" src="zxml . js" ></script> 

La bibliotheque zXML permet de disposer sous IE d'une classe identique (ou presque) a 
celle de Firefox. La seule difference reside dans son nom qui est precede d'un « z » soit 
zXMLSerializer au lieu de XMLSerializer precedemment utilise avec Firefox. II convient 
done de modifier le nom de cette classe lors de l'instanciation de l'objet objetSeri al i zer 
dans la fonction jouerO du fichier fonctionsMachine.js en lui ajoutant un « z » comme 
dans le code ci-dessous. 

Ivar objetSerial izer=new zXMLSerial izer( ) ; 
var parametresXml = objetSerial izer. serial izeToString(elementJoueur) ; 

A noter que la bibliotheque zXML permet aussi de disposer dans Firefox de la propriete 
. xml propre a Internet Explorer. Nous aurions done pu aussi remplacer les deux lignes de 
code precedentes par 1' instruction ci-dessous : le fonctionnement du systeme aurait ete 
identique. 

var parametresXml =elementJoueur. xml ; 

Les modifications necessaires pour assurer la compatibilite du systeme pour tous les 
navigateurs sont terminees. Vous pouvez enregistrer vos fichiers des maintenant et passer 
a la phase de test sous IE si vous le desirez. 

Dans la partie suivante, nous allons presenter une alternative a l'utilisation de SimpleXML. 
Au terme des modifications, vous pouvez toujours faire fonctionner votre application 
dans Wamp5 mais l'interet de cette modification est evidemment de la tester sur un 
serveur PHP 4. 

La principe de l'analyseur syntaxique consiste a creer un objet d'analyse XML (a l'aide 
de xml_parser_create( )) puis a lui associer trois fonctions d'analyse. La premiere analyse 
toutes les balises ouvrantes des elements du document XML, la seconde, les balises 
fermantes et enfin la troisieme les contenus des elements. Si dans la premiere fonction, 
nous enregistrons dans une variable globale le nom de la balise en cours d'analyse, il est 
ensuite possible de recuperer cette meme variable dans la troisieme fonction ce qui nous 
permet de traiter le contenu selon le nom de la balise concernee. Si on applique cette 
technique a notre systeme, nous pouvons ainsi recuperer les informations du joueur 
contenu dans les balises <nom> et <prenom> du document XML envoye par le navigateur. 

Pour la mise en oeuvre de cet analyseur, commencez par saisir les trois fonctions 
d'analyse qui sont associees a l'objet analyseur (voir code 11-8 et le repere 1 de la 
figure 11-4). 

Code 11-8 : Les trois fonctions d'analyse : 

$glob_balise=' ' ; 

$nomJoueur=' ' ; 

$prenomJoueur=' ' ; 

function debut_element($analyseur, $element, Sattribut) ( 

global $glob_bal ise; 

$glob_bal ise=$element; 
} 
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function fin_element($analyseur, Selement) { 

global $glob_balise; 

$glob_balise=' ' ; 
} 

function contenu_element($analyseur, $data) { 

global $glob_balise; 

global SnomJoueur; 

global SprenomJoueur; 

if ($glob_balise=="NOM") $nomJoueur=$data; 

if ($glob_balise=="PRENOM") $prenomOoueur=$data; 
} 



Figure 11-4 

Modification de la page 
gainAleatoire.php : ajout 
d'un analyseur syntaxique 
XML compatible PHP 4 
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Puis creez et configurez l'objet analyseur afin de le lier aux trois fonctions precedentes 
(voir code 1 1-9 et le repere 2 de la figure 11-4). 

Code 11-9 : Creation et configuration de 1' analyseur : 

//creation du parser 

$analyseur = xml_parser_create() ; 

//permet de differencier les MAJ et min dans les noms de balise 

xml_parser_set_option($analyseur, XML_0PTI0N_CASE_F0LDI NG , false); 

//permet d'indiquer le type de codage du fichier XML 

xml_parser_set_option($analyseur, XML_OPTION_TARGET_ENCODING , "UTF-8" ) ; 

//permet de declarer les noms des 3 fonctions d'analyse de l'objet 

xml_set_element_handler($analyseur, 'debut_elemenf , 'f1n_element' ) ; 

xml_set_character_data_handler($analyseur, 'contenu_element' ) ; 
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Enfin, 1' analyse proprement dite est lancee sur le document XML place dans la variable 
IparametresXml grace a la methode xml_parse() de l'objet. Une derniere methode 
(xml_parser_f ree( )) pourra etre appelee ensuite au terme du traitement afin de supprimer 
l'analyseur en cours (voir code 1 1-10 et le repere 3 de la figure 11-4). 

Code 11-10 : Execution de l'analyse : 

|xml_parse($analyseur, IparametresXml ) ; 
xml_parser_free($analyseur) ; 

Une fois les modifications effectuees, vous pouvez enregistrer le fichier PHP et passer 
aux tests dans le navigateur de votre choix et sur un serveur PHP 4 ou 5. 

Test du systeme 

Ouvrez la page index.html dans le navigateur Firefox en appuyant sur la touche F12 de 
Dreamweaver afin de vous assurer que votre application fonctionne toujours avec les 
navigateurs compatibles W3C. Puis basculez dans un navigateur IE par la methode de 
votre choix. Le systeme devrait fonctionner cette fois de la meme maniere qu'avec Firefox. 

En ce qui concerne la portability du fichier PHP, le fait qu'il fonctionne sous PHP 5 atteste 
deja qu'il n'y a pas d'erreur de code et il y a de forte chance qu'il fonctionne de la meme 
maniere sur un serveur PHP 4. Cependant, si vous le desirez, vous pouvez mettre en place 
votre application sur un serveur distant PHP 4 pour le tester en situation reelle. II faudra 
toutefois s'assurer que l'extension xml de PHP est activee sur le serveur pour que l'analyseur 
puisse fonctionner. Pour verifier 1' activation de cette extension, il suffit de placer un fichier 
phpinfo sur votre serveur distant, de l'afficher depuis un navigateur et de lancer ensuite une 
recherche dans la page avec le mot-cle « xml ». Vous pourrez ainsi facilement localiser la 
partie de la page qui affiche l'etat de l'extension xml et verifier qu'elle bien activee. 

Atelier 11-5 : requete asynchrone POST avec parametres JSON 
Composition du systeme 

Pour cloturer les ateliers de ce chapitre sur les differentes requetes POST, nous vous proposons 
de realiser une requete Ajax avec envoi de parametres au format JSON. 

Dans les ateliers precedents, nous avons presente le format XML comme le format 
permettant d'envoyer des donnees sans limitation de taille et disposant d'un hierarchisa- 
tion de leur contenu. Toutefois, le format XML souffre aussi d'une lourdeur syntaxique 
liee au grand nombre de balises necessaires pour encadrer les donnees. 

II existe cependant, un nouveau format directement issu de la syntaxe des objets JavaScript 
qui se place actuellement comme une solution alternative a 1' utilisation du XML pour faire 
des transferts de donnees entre le client et le serveur. II s'agit du format JSON (Java- 
Script Objet Notation). En fait, JSON est la notation objet de JavaScript dont la syntaxe 
permet de representer des objets et leurs proprietes mais aussi de simples tableaux indi- 
ces. Ces types d'objets etant presents dans la grande majorite des langages, il est alors 
tres facile de mettre en place des fonctions de codage et de decodage des donnees speci- 
fiques a chaque langage, faisant ainsi de JSON un format de transfert universel et leger. 

Dans cet atelier, nous allons appliquer le langage JSON pour la premiere fois dans le 
transfert des parametres emis du client vers le serveur lors de l'envoi d'une requete Ajax. 
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Dans ce contexte, il faut mettre en place des systemes d'encodage cote client et de deco- 
dage cote serveur pour restituer les donnees afin de les traiter ensuite en PHP. 

Meme si nous pouvions realiser ces systemes directement dans le script, il est beaucoup 
plus judicieux de faire appel a des bibliotheques externes qui assurent ces fonctions 
d'encodage et de decodage automatiquement tout en preservant la conformite avec les 
technologies utilisees (JavaScript cote client et PHP cote serveur par exemple). 

Cette structure est composee : 

• d'une page HTML (1 ndex . html ) identique a celle de l'atelier 11-4; 

• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (fonctionsMachine. js) qui contient les fonctions specifiques a 1' application 
Ajax de la machine a sous dont la structure de base avant sa modification est identique 
a celle de l'atelier 11-4 ; 

• d'une bibliotheque externe JSON (j son . j s) que nous pouvons telecharger sur le site de 
l'editeur json.org ; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celle de 
l'atelier 11-4 mais qui est modifie pour assurer le decodage des donnees JSON recep- 
tionnees ; 

• d'une bibliotheque externe JSON-PHP (JSON . php) que nous pouvons telecharger sur le 
site de l'editeur ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier 11-4; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du systeme est identique a celui de l'atelier precedent hormis le fait que 
l'envoi et la reception des parametres de la requete Ajax sont realises au format JSON. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 1 1-4 (i ndex. html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chapll/atelierll-5/. Copiez ensuite les autres 
fichiers de l'atelier precedent dans ce nouveau dossier. 

Nous allons commencer par mettre en oeuvre le systeme d'encodage cote client. Pour 
cela, telechargez sur votre ordinateur le fichier de la bibliotheque JSON. 



Bibliotheque JSON 

Vous pouvez telecharger la bibliotheque JavaScript JSON a I'adresse ci-dessous : 
http://www.json. org/json.js 



Copiez ensuite le fichier json. js dans le repertoire de l'atelier actuel /chapll/atel ierll-5/ 
puis ouvrez le fichier index.html avec Dreamweaver et ajoutez une balise <script> faisant 
reference au fichier de la bibliotheque dans la partie <head> de la page. 

<script type="text/javascript" src="json. js"X/script> 
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Enregistrez votre page puis passez au fichier fonctionsMachine. js pour localiser la fonc- 
tion jouerO dans laquelle nous allons intervenir pour integrer notre encodeur JSON. 
Pour coder les parametres en JSON, il faut commencer par creer un objet JavaScript afin 
de pouvoir y ajouter les donnees que nous allons transferer sur le serveur. 

var objetJS = new ObjectO; 

Pour ajouter une propriete a un objet, il suffit d'appliquer le nom de la propriete desiree a 
l'objet en syntaxe pointee et de lui affecter ensuite la valeur correspondante. Dans notre 
cas, nous allons creer deux proprietes nom et prenom auxquelles nous allons affecter les 
valeurs de leur champ de saisie respectif a l'aide de la fonction codeContenuO que nous 
avons deja developpe dans un atelier precedent (pour me moire cette fonction prend 
comme argument l'identifiant de l'element concerne et retourne son contenu apres lui 
avoir applique un codage UTF 8). 

IobjetOS.nom=codeContenu("nom") ; 
objetJS.prenom=codeContenu( "prenom") ; 

Une fois l'objet et ses proprietes crees, nous pouvons passer a l'encodage en JSON en 
appliquant a l'objet la methode toJSONString( ) de notre bibliotheque externe. Le resultat 
de l'encodage est alors affecte a la variable parametres qui est ensuite inseree en para- 
metre de la methode send( ) lors de l'envoi de la requete. 

var parametres =objetJS.toJSONString() ; 

Une fois modifiee, la fonction jouer( ) doit etre semblable au code 11-11 ci-dessous. 

Code 11-11 : Fonction jouerO : 

function jouerO { 

objetXHR = creationXHRO; 

var objetJS = new ObjectO; 

ob j etOS . nom=codeContenu ( "nom" ) ; 

objetJS.prenom=codeContenu( "prenom") ; 

var parametres =objetOS.toJSONString() ; 

objetXHR. open ("post" , "gainAleatoi re.php" , true) ; 

objetXHR. onreadystatechange = actualiserPage; 

objetXHR. setRequestHeader( "Content-Type" , "appl ication/x-www-form-url encoded") ; 

//gestion du bouton et du chargeur 

document. getElementById( "button" ) .disabled= true; 

document. get El ementById( "charge" ) . sty 1 e. vi si bility=" visible" ; 

objetXHR. send(parametres) ;//envoi de la requete 
} 

Enregistrons le fichier fonctionMachine. js ainsi modifie et passons maintenant au fichier 
PHP qui doit receptionner ces donnees au format JSON. 



Bibliotheque JSON-PHP 

Auteur : Michal Migurski 

Vous pouvez telecharger la bibliotheque JSON-PHP a I'adresse ci-dessous : 

http://pear.php.net/pepr/pepr-proposal-show.php?id=198 
Le site de I'auteur de cette bibliotheque se trouve a I'adresse ci-dessous : 

http://mike.teczno.com/json.html 



Ici aussi, nous allons faire appel a une bibliotheque afin de se decharger de la tache du 
decodage JSON. II existe de nombreuses bibliotheques qui proposent ce genre de 
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fonctionnalites mais dans cet ouvrage nous allons utiliser la bibliotheque JSON-PHP qui 
a l'avantage d'etre tres simple a installer. 

Telechargez le kit de la bibliotheque JSON-PHP et copiez ensuite le fichier J SON . php dans 
le repertoire de l'atelier en cours. Ouvrez maintenant le fichier gai nAl eatoi re . php et effa- 
cez toutes les instructions situees apres la recuperation du flux d'entree dans la variable 
Sparametres jusqu'a l'instruction du calcul du gain. Saisissez ensuite l'instruction ci- 
dessous de sorte a pouvoir disposer de la bibliotheque JSON-PHP dans notre fichier. 

require_once( 'JSON.php' ) ; 

Pour decoder les donnees au format JSON, nous devons commencer par creer un objet 
JSON a l'aide de la classe Serv1ces_JS0N. 

lobjetJSON = new Services_JSON() ; 

Une fois l'objet cree, il ne reste plus qu'a lui appliquer sa methode decodet ) afin de recu- 
perer un autre objet PHP SobjetJoueur semblable a celui initialement cree avec JavaScript 
avant l'envoi de la requete et recupere dans la variable $parametres JSON. 

$objetJoueur = $objetJSON->decode($parametresJSON) ; 

Maintenant que nous disposons d'un objet PHP comportant la meme structure et les 
memes donnees que l'objet JS precedemment cree cote client, il est tres facile de recupe- 
rer les informations initiales grace a ses proprietes en ajoutant a l'objet un accesseur (le 
symbole ->) suivi du nom des proprietes comme dans le code ci-dessous. 

I$nomJoueur=$objetJoueur->nom; 
$prenomJoueur=$objetJoueur->prenom; 

Les deux parametres necessaires au traitement etant maintenant recuperes, le reste du 
programme est semblable aux ateliers precedents (voir code 11-12). 

Code 11-12 : Instructions du fichier gai nAl eatoi re. php : 

header( "Content-Type: text/plain ; charset=utf-8" ) ; 

header( "Cache-Control : no-cache , private"); 

header( "Pragma : no-cache"); 

sleepC2); 

SparametresJSON = file_get_contents( 'php://inpuf ) ; 

require_once( "JSON.php' ) ; 

$objetJS0N = new Services_JSON() ; 

lobjetJoueur = $objetJSON->decode($parametresJSON) ; 

$nomJoueur=$objetJoueur->nom; 

$prenomJoueur=$objetJoueur->prenom; 

$gain = rand(O.lOO); 

$nom=$prenomJoueur. " " . SnomJoueur; 

$ result a t=$nom. ' : ' .$gain; 

echo $resultat ; 

Nous venons d' utiliser la bibliotheque externe JSON-PHP pour recuperer les donnees au 
format JSON cote serveur, mais il existe desormais une extension json integree a PHP et 
disponible pour les versions de PHP ulterieures a 5.2. Pour exploiter cette nouvelle 
extension, il suffit alors d'utiliser les methodes json_decode() ou json_encode(). Avec 
cette extension, le code du systeme de decodage est evidemment beaucoup plus simple et 
ne necessite plus de disposer de la bibliotheque JSON-PHP. Pour illustrer son utilisation, 
nous vous proposons d' appliquer cette seconde technique a l'exemple de notre atelier. Le 
nouveau contenu du fichier gainAleatoire.php serait alors semblable au code 11-13. 
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Code 11-13 : Instructions du fichier gainAleatoi re. php pour PHP 5.2 ou + 

header( "Content-Type: text/plain ; charset=utf-8") ; 

headerC'Cache-Control : no-cache , private"); 

headerC'Pragma: no-cache"); 

sleep(2); 

SparametresJSON = file_get_contents( 'php://input ' ) ; 

$objetJoueur=json_decode($parametresJSON) ; 

$nomJoueur=$objetJoueur->nom; 

$prenomJoueur=$objetJoueur->prenom; 

$gain = rand(O.lOO) ; 

$nom=$prenomJoueur. " " .SnomJoueur; 

$ result a t=$nom. ' : ' . $ g a i n ; 

echo Sresultat ; 



Test du systeme 



Ouvrez la page index.html dans le navigateur Firefox en appuyant sur la touche F12 de 
Dreamweaver. Saisissez votre nom et prenom dans les deux champs du formulaire puis 
cliquez sur le bouton JOUER. L' application doit alors transmettre les parametres JSON 
au serveur et le chargeur doit apparaitre pour vous signaler que le traitement est en cours. 
Au terme du traitement, vos nom et prenom doivent s'afficher dans la fenetre des resultats 
suivis du nouveau gain obtenu comme dans 1' atelier precedent. 

Pour observer les transferts de donnees entre le navigateur et le serveur, activez Firebug 
et cliquez sur l'onglet Console. Effacez les differents enregistrements precedents a l'aide 
de la fonction Clear du menu puis cliquez de nouveau sur le bouton JOUER. L' envoi de la 
requete POST au fichier PHP doit apparaitre dans la fenetre de Firebug, cliquez sur le petit 
« + » qui precede ce fichier pour le derouler puis sur l'onglet Post pour voir apparaitre les 
parametres au format JSON qui ont ete envoyes au serveur (voir figure 11-5). Vous 
pouvez ensuite visualiser les donnees renvoyees par le serveur en cliquant sur l'onglet 
Response mais elles sont semblables a celles que nous avons eues jusqu' a present. 



Figure 11-5 

Test de la requete 
Ajax avec parametres 
au format JSON 




Atelier 11-5 



Bravo, M Jean-Marie Defrance vous avez gagne 79 Euros 
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Applications Ajax-PHP 
avec reponses HTML, XML, 

JSON et RSS 



Dans les differents ateliers que nous avons realises jusqu' a present, nous avons toujours 
utilise le format texte pour recuperer les reponses du serveur. Cependant, d'autres 
formats de donnees peuvent etre utilises pour effectuer ces transferts afin de recuperer 
des donnees preformatees (avec des fragments de HTML par exemple) mais surtout plus 
volumineuses et hierarchisees (avec JSON, XML ou encore RSS). 

Aussi, nous vous proposons dans ce chapitre d'etudier, sur la base de la meme applica- 
tion de la machine a sous, les principaux formats que vous pourrez utiliser dans vos futures 
applications Ajax-PHP. L'objectif de ces ateliers n'etant pas d'ajouter des fonctionnalites 
supplementaires a 1' application mais au contraire de comparer sur une application iden- 
tique ce qui change entre ces techniques pour effectuer le transfert de la reponse du 
serveur dans des formats differents. 



Atelier 12-1 : requete avec reponse en HTML 
Composition du systeme 

Nous allons commencer par etudier le transfert d'une reponse au format HTML. Celui-ci 
peut etre interessant lorsqu'on veut remplacer directement toute une zone de la page Web 
par une nouvelle structure HTML differente. 

Toutefois, ce n'est pas le cas de ce premier exemple, car nous allons nous contenter de 
remplacer le conteneur info par un fragment HTML identique mais dont les resultats 
(nom et gain) y ont ete prealablement inseres. Ainsi, si 1' envoi de la requete ne change 
pas de celui utilise pour 1' atelier 10-4 (requete GET avec parametres), le fichier PHP 
renvoie cette fois un fragment HTML (identique a celui de la balise <div> d'identifiant 
info) dans lequel ont deja pris place les valeurs des resultats (le nom et le gain). Une fois 
receptionne par le moteur Ajax, celui-ci remplace le fragment HTML actuel de la page 
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Web par celui receptionne dans la reponse du serveur pour que les nouveaux resultats 
soient visibles a l'ecran de la meme maniere que dans 1' atelier precedent. 

Cette structure est composee : 

• d'une page HTML (index, html ) dont la structure est identique a celle del' atelier 10-4 ; 

• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (fonctionsMachine.js) qui contient les fonctions specifiques a 1' application 
Ajax de la machine a sous dont la structure de base avant modification est identique a 
celle del 'atelier 10-4 ; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celle de 
P atelier 10-4 mais qui va etre modifiee pour gerer la reponse HTML ; 

• d'une feuille de styles (styl e . ess) identique a celle de Patelier 10-4 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du systeme est identique a celui de l'atelier 10-4 que nous allons 
prendre comme base de depart pour effectuer nos modifications hormis le fait que, cette 
fois, la reponse du serveur est constituee d'un fragment HTML. 

Conception du systeme 

Ouvrez la page HTML de P atelier 10-4 (i ndex . html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chapl2/atelierl2-l/. Copiez ensuite les autres 
fichiers de l'atelier precedent dans ce nouveau dossier. 

Pour gerer le transfert de la reponse en HTML, nous allons commencer par modifier le 
code du fichier PHP gainAleatoire.php afin qu'il renvoie un fragment de HTML et non 
plus les donnees texte separees par le symbole « : » comme dans l'atelier 10-4. Pour cela, 
ouvrez le fichier PHP et supprimez (ou commentez) P avant derniere instruction qui 
concatene les deux donnees resultats avec le symbole « : » puis remplacez-la par le code 
ci-dessous : 






$resultat='Bravo, M <span id="gagnant">' .$nom. '</span> vous avez gagne 
<span id="resul tat">' .$gain. '</span>  Euros ' ; 



Ainsi, ce fragment de code HTML enregistre dans la variable $resultat est directement 
renvoye comme resultat au navigateur. Les deux informations $nom et $gain ayant deja 
pris place dans les balises <span> correspondantes. Le resultat etant maintenant du 
HTML, il convient de modifier l'en-tete Content-type pour lui affecter la valeur text/html 
au lieu de text/plain (voir code 12-1). 

Code 12-1 : fichier gainAleatoire.php apres modification : 

//indique que le type de la reponse sera du HTML 
header( "Content-Type: text/html ; charset=utf-8") ; 
//anti cache pour HTTP/1.1 
headerC'Cache-Control : no-cache , private"); 
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//anti cache pour HTTP/1.0 

header( "Pragma: no-cache"); 

//simulation du temps d'attente du serveur (2 secondes) 

sleep(2); 

//recuperation du parametre nom 

if(isset($_REQUEST['nom'])) $nom=$_REQUEST[ , nom'] ; 

else $nom="inconnu" ; 

//calcul du nouveau gain entre et 100 euros 

$gain = rand(0,100); 

//mise en forme HTML du resultat 

$resultat='Bravo, M <span id="gagnant">' .$nom. '</span> vous avez gagne 

:L '<span id="resultat">' .$gain. '</span> Euros' ; 

//envoi de la reponse au navigateur 

echo $resultat; 

Passez maintenant cote client et ouvrez le fichier fonctionsMachine.js, puis localisez la 
fonction actual iserPageO. Comme cette fonction recupere l'attribut responseText de 
l'objet XHR contenant la reponse du serveur, nous allons devoir la modifier pour tenir 
compte du fait que la reponse est desormais un fragment de code HTML et non plus les 
deux donnees (nom et gain) separees par le caractere « : ». 

La fonction spl i t ( ) n'etant plus necessaire, la recuperation du resultat est done reduite a 
une simple affectation de la variable nouveauResul tat par l'attribut responseText de l'objet 
XHR. 

var nouveauResul tat = objetXHR. responseText; 

Pour remplacer le fragment de code HTML de 1' element info par le resultat precedem- 
ment recupere, nous n'allons pas utiliser ici notre fonction remplacerContenu( ) que nous 
avions developpee avec des methodes du DOM dans un atelier precedent. En effet, celle- 
ci est prevue pour gerer exclusivement le texte d'un element et non un fragment de code 
HTML pour lequel ses balises, dans ce cas, ne seraient plus interpreters par le navigateur 
et s'afficheraient comme un simple texte a l'ecran. 

En solution alternative pour realiser le remplacement du fragment HTML (ce ne sera pas 
toujours le cas), nous allons faire appel a l'attribut i nnerHTML qui, lui, n'a pas cet inconve- 
nient. Pour appliquer cet attribut a l'element concerne, il faut done au prealable le refe- 
rencer avec la methode getElementById( ). II suffit ensuite d'affecter a l'attribut i nnerHTML 
de l'element, le fragment HTML memorise dans la variable nouveauResul tat pour que le 
remplacement soit effectue. 

I var elementlnfo = document .getElementByldC'info") ; 
element I nfo.innerHTML=nouveauResul tat; 

Une fois modifie, le code de la fonction actual i serPaget ) doit etre semblable au code 12-2 
ci-dessous. 

Code 12-2 : partie de la fonction actual iserPage( ) apres modification : 

function actual iserPage( ) { 

if (objetXHR. readyState == 4) {//test si le resultat est disponible 
if (objetXHR. status == 200) { 

var nouveauResultat = objetXHR. responseText;//recup du resulat 

var elementlnfo = document. getElementByldC'info") ; 

el ementlnf o . i nnerHTML=nouveauResul tat ; 
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//affiche la zone info 

document. get Element By I d( "info" ) .style. vis ibil ity=" visible" ; 

//gestion du bouton et du chargeur 

document. get Element By Id ("button") .disabled= false; 

document. get Element By Id ("charge") .style. vis ibil ity=" hidden" ; 



1 



} 
} 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 



Test du systeme 



Sous Dreamweaver, ouvrez la page i ndex . html dans le navigateur Firefox en appuyant sur 
la touche F12. Le fonctionnement du nouveau systeme doit etre exactement le meme que 
celui de 1' atelier 10-4, hormis le fait que le transfert des resultats est effectue cette fois a 
l'aide d'un fragment HTML. 

Pour visualiser les donnees renvoyees par le serveur lors de la reponse, nous vous 
conseillons d'activer Firebug et de cliquer sur l'onglet Console. Commencez par cliquer 
sur le bouton Clear, de sorte a effacer les eventuels enregistrements anterieurs. Saisissez 
ensuite votre nom et cliquez sur bouton JOUER. Une nouvelle requete envoy ee a gain- 
Aleatoire.php doit alors apparaitre dans la fenetre de l'onglet Console. Cliquez sur le + 
qui precede le nom du fichier pour le deplier puis sur l'onglet Response. Vous devriez 
voir le fragment HTML renvoye par le serveur (voir figure 12-1) qui remplacera toute la 
zone de resultat du systeme (balise <di v> d'identifiant i nf o). 
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Atelier 12-2 : requete avec reponse en XML 
Composition du systeme 

Nous allons maintenant nous interesser au format XML pour effectuer le transfert de la 
reponse du serveur. Hormis le fait que le nombre d'informations renvoyees pourra main- 
tenant etre beaucoup plus important, le format XML permet aussi de hierarchiser les 
donnees, ce qui se revele souvent bien pratique pour recuperer des resultats complexes 
ou issus d'une base de donnees par exemple. 

Dans cet atelier, nous ne renvoyons que les valeurs du gain et du nom du gagnant comme dans 
les ateliers precedents, mais il vous sera tres facile par la suite d' adapter cette technique 
a des transferts de donnees plus importants. 

Cette structure est composee : 

• d'une page HTML (index, html )dont la structure est identique a celle del' atelier 12-1 ; 

• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (fonctionsMachine. js) qui contient les fonctions specifiques a 1' application 
Ajax de la machine a sous dont la structure de base avant modification est identique a 
celle de l'atelier 12-1 ; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celle de 
l'atelier 12-1 mais qui va etre modifie pour gerer la reponse XML ; 

• d'une feuille de styles (style. ess) identique a celle de l'atelier 12-1 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du systeme est strictement identique a celui de l'atelier 12-1 que nous 
venons de realiser sauf que dans cet atelier le transfert de la reponse est au format XML. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 12-1 (index, html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chapl2/atelierl2-2/. Copiez ensuite les autres 
fichiers de l'atelier precedent dans ce nouveau dossier. 

Pour adapter le systeme au transfert d'une reponse en XML, nous allons de nouveau 
modifier le code du fichier PHP gainAleatoire.php afin qu'il renvoie cette fois un docu- 
ment XML. Pour cela, ouvrez le fichier PHP et remplacez l'avant-derniere instruction par 
le code ci-dessous : 

|$resultat='<?xml version="1.0" encoding="utf-8"?>' ; 
$resultat.= "<resultats><nom>" .$nom. "</nom><gain>" .$gain. "</gain></resul tats>" ; 

Ces lignes de code permettent de construire le document XML resultat constitue du 
prologue XML habituel suivi de la structure hierarchique des balises dans lesquelles ont 
ete inserees les nouvelles valeurs du nom et du gain. Nous disposons ainsi dans la varia- 
ble $resultat d'un document XML bien forme (revoir si besoin les ressources sur le 
XML dans la partie 4 de cet ouvrage pour savoir ce qui caracterise un document bien 
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forme) dans lequel nous avons un nceud racine <resultats> et deux autres noeuds enfants 
<nom> et <gain>. 

Enfin, le resultat etant maintenant au format XML, il faut done de nouveau modifier l'en- 
tete Content-type pour lui affecter cette fois la valeur text/xml . 

Code 12-3 : fichier gainAleatoire.php apres modification : 

//indique que le type de la reponse sera du HTML 

headert "Content-Type: text/xml ; charset=utf-8") ; 

//anti cache pour HTTP/1.1 

headerC'Cache-Control : no-cache , private"); 

//anti cache pour HTTP/1.0 

headert "Pragma: no-cache"); 

//simulation du temps d'attente du serveur (2 secondes) 

sleep(2); 

//recuperation du parametre nom 

if(isset($_REQUEST['nom'])) $nom=$_REQUEST[ 'nom'] ; 

else $nom="inconnu" ; 

//calcul du nouveau gain entre et 100 euros 

$gain = rand(0,100); 

//mise en forme XML du resultat 

$resultat='<?xml vers1on="l.O" encoding="utf-8"?>' ; 

$resultat.= "<resultats><nom>".$nom. "</nom><gain>".$gain. "</gain></resultats>"; 

//envoi de la reponse au navigateur 

echo $resultat; 

Pour vous assurer que le fichier PHP est correctement configure et que le document 
XML qui va etre renvoye au navigateur est bien forme, nous vous conseillons dans un 
premier temps de tester individuellement le fichier gainAleatoire.php sur le Web local 
(ouvrez le fichier PHP dans Dreamweaver et appuyez sur la touche F12). Une fois 
appelee dans le navigateur, la page doit afficher l'arbre du document XML (s'il est bien 
forme) avec la valeur « inconnu » dans la balise <nom> car aucune requete GET ne lui 
precise encore le nom du joueur. Vous pouvez alors simuler une requete client en ajoutant 
?nom=Defrance par exemple a la suite du nom de la page dans la barre d'adresse (voir 
figure 12-2). Le nom du joueur doit alors remplacer la valeur « inconnu » dans la balise 
<nom>. 
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Figure 12-2 

Test du fichier PHP verifiant que le document XML renvoye au navigateur est bien forme. 
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II faut maintenant modifier le fichier fonctionsMachine. js afin que le moteur Ajax recep- 
tionne comme il se doit ce document XML. Dans la fonction actual iserPageO nous 
allons commencer par modifier l'attribut de l'objet XHR utilise pour recuperer la 
reponse. En effet, il ne s'agit plus maintenant de donnees texte, comme pour tous les 
transferts des reponses que nous avons realises jusqu'a present, mais de donnees XML. 
Si nous desirons utiliser les methodes du DOM XML, l'attribut responseXML de l'objet 
XHR doit alors remplacer l'attribut responseText. Les donnees recuperees par l'attribut 
responseXML sont alors transferees dans un arbre XML et peuvent ainsi etre manipulees 
directement par les methodes DOM specifiques a la gestion des documents XML. 

var nouveauResul tatXML = objetXHR. responseXML; 

Avant de recuperer les valeurs du gain et du nom du joueur, nous allons creer un pointeur 
raci neResul tats qui permet de referencer le noeud racine du document initial <resul tats>. 

var racineResul tats = nouveauResultatXML.firstChild; 

Une fois cette reference mise en place, il suffit d'utiliser les methodes du DOM pour 
parcourir l'arbre XML afin de recuperer les valeurs des nceuds texte des elements <nom> et 
<gain>. 

I var gainTxt=raci neResul tats. childNodes[l] .firstChild.nodeValue; 
var gagnantTxt=raci neResul tats. childNodes[0] .firstChild.nodeValue; 

II ne reste plus ensuite qu'a affecter ces nouvelles valeurs aux balises <span> d'identifiant 
resultat et gagnant avec la fonction remplacerContenu( ) comme l'illustre ce code ci- 
dessous. 



I 



remplacerContenu( "resultat" .gainTxt) ; 
remplacerContenut "gagnant" .gagnantTxt) ; 



Code 12-4 : representation partielle de la fonction actual i serPage( ) apres modification : 

function actual iserPage( ) { 

if (objetXHR. readyState == 4) (//teste si le resultat est disponible 
if (objetXHR. status == 200) { 

//recup du resultat dans un arbre XML 

var nouveauResultatXML = objetXHR. responseXML; 

//creation d'un pointeur racine du resultat 

var racineResultats = nouveauResultatXML.firstChild; 

//recup des valeurs des elements nom et gain dans l'arbre 

var gainTxt=raci neResul tats. childNodes[l]. firstChild.nodeValue; 

var gagnantTxt=raci neResul tats. childNodes[0]. firstChild.nodeValue; 

//actual isation des resultats 

remplacerContenu( "resultat", gainTxt); 

remplacerContenu( "gagnant", gagnantTxt) ; 

//affiche la zone info 

document. get Element By Id ( "info") .style. vi si bil ity=" visible" ; 

//gestion du bouton et du chargeur 

document. get Element By Id ("button") .disabled= false; 

document. get Element By Id ("charge") .style.visibil ity=" hidden" ; 
} 
} 
} 

II existe cependant une autre alternative pour recuperer les donnees dans l'arbre XML 
resultat. Celle-ci exploite la methode getElementsByTagNameO qui permet de recuperer 
la liste (dans un tableau de variables) de tous les elements dont le nom de la balise est 
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identique a celui qui est passe en argument de la methode. Ainsi, l'instruction suivante 
recupere un tableau de tous les elements portant le nom gain : 

[ var gainTableau=nouveauResultatXML.getElementsByTagName("gain") : 

Si vous desirez ensuite acceder a l'une des valeurs de ce tableau, il faut alors mentionner 
son indice entre crochets comme ci-dessous. 

var gainElement=nouveauResultatXML. getEl ementsByTagName("gain")[0]; 

ou encore : 

var gainElement= gainTableau[0] ; 

Dans notre exemple, nous n'avons qu'un seul element de nom gain et il est done facile - 
ment recuperable par l'indice mais si nous en avions plusieurs, il serait alors judicieux 
d'utiliser une boucle afin de pouvoir traiter rapidement tous les elements du tableau 
comme l'illustre le code ci-dessous. 

Ifor(var i=0; i<gainTableau.length;i++) { 
alert(gainTableau[i]) ;//traitement des elements 

Dans le cadre de notre atelier, si nous appliquons cette nouvelle methode pour recuperer 
les valeurs des resultats, les nouveaux codes de la fonction seraient alors les suivants (les 
instructions du code 12-5 ci-dessous devraient alors remplacer les lignes en gras du 
code 12-4). 

Code 12-5 : solution alternative avec la methode getEl ementsByTagName( ) : 

//recup du resultat dans un arbre XML 

var nouveauResultatXML = objetXHR.responseXML; 

//recuperation des valeurs dans 1 'arbre XML 

var gainTxt=nouveauResultatXML. getEl ementsByTagName("gain")[0] .firstChild.nodeValue; 

var gagnantTxt=nouveauResultatXML. getEl ementsByTagName 

*•( "nom" )[0]. firstChild.nodeValue; 

//actual isation des resultats 

remplacerContenu("resultat",gainTxt); 

remplacerContenu("gagnant",gagnantTxt) ; 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 



Test du systeme 



Sous Dreamweaver, ouvrez la page i ndex . html dans le navigateur Firefox en appuyant sur 
la touche F12. Le fonctionnement du nouveau systeme doit etre exactement le meme que 
celui de 1' atelier 12-1, hormis le fait que le transfert des resultats est effectue cette fois a 
l'aide d'un document XML. 

Pour visualiser les donnees renvoyees par le serveur lors de la reponse, nous vous 
conseillons d'activer Firebug et de cliquer sur l'onglet Console. Commencez par cliquer 
sur le bouton Clear de sorte a effacer d'eventuels enregistrements anterieurs. Saisissez 
ensuite votre nom et cliquez sur le bouton JOUER. Une nouvelle requete envoyee a 
gainAl eatoi re . php doit alors apparaitre dans la fenetre de l'onglet Console. Cliquez sur le 
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+ qui precede le nom du fichier pour le deplier puis sur l'onglet Response. Vous devriez 
voir le document XML renvoye par le serveur (voir figure 12-3). 
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Figure 12-3 

Test du transfert d'une reponse XML 



Atelier 12-3 : requete avec reponse en JSON sans 
bibliotheques externes 

Composition du systeme 

Nous avons deja utilise le format JSON dans le cadre de 1' atelier 11-5 pour 1' envoi des 
parametres de la requete vers le serveur. Nous allons maintenant nous interesser a l'utili- 
sation de JSON pour formater les donnees renvoyees dans la reponse du serveur. Pour le 
codage et le decodage des donnees, nous pourrions utiliser des maintenant des bibliothe- 
ques externes comme nous l'avons fait pour l'atelier 1 1-5, mais nous avons prefere nous 
en passer dans un premier temps afin de vous demontrer que c'est possible de travailler 
sans, mais cette solution n'est pas sans poser de problemes. 

Cette structure est composee : 

• d'une page HTML (index, html) dont la structure est identique acellede l'atelier 12-2 ; 

• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 
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• d'un fichier JS (f oncti onsMachi ne . js) qui contient les fonctions specifiques a l'application 
Ajax de la machine a sous dont la structure de base avant modification est identique a 
celle de 1' atelier 12-2 ; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celle de 
P atelier 12-2 mais qui est modifiee pour gerer la reponse XML ; 

• d'une feuille de styles (styl e . ess) identique a celle de Patelier 12-2 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du systeme est strictement identique a celui de Patelier 12-2 que nous 
venons de realiser hormis le fait que le transfert de la reponse du serveur est realise au 
format JSON. 

Conception du systeme 

Ouvrez la page HPML de Patelier 12-2 (index.html) et sauvegardez-la sous le meme 
nom dans un nouveau repertoire nomme /chapl2/atel ierl2-3/. Copiez ensuite les autres 
fichiers de Patelier precedent dans ce nouveau dossier. 

Pour adapter le systeme au transfert d'une reponse encodee en JSON, nous allons 
commencer par modifier le fichier PHP ga i nAl eatoi re . php arm de coder les donnees de la 
reponse avant qu'elles ne soient renvoyees au navigateur. 

Pour etablir une structure de reponse JSON equivalente a celle de 1' atelier precedent 
(nom du joueur et son gain), nous allons nous appuyer sur le document XML envoye 
precedemment. Celui-ci est constitue d'un element racine <resultats> et de deux 
elements enfants <nom> et <gain> contenant chacun les donnees a transmettre au navigateur 
comme l'illustre le code de l'exemple ci-dessous. 

Code 12-6 : rappel de la structure XML du resultat de l'atelier 12-2 : 

<resultats> 

<nom>Defrance</nom> 

<gain>87</gain> 
</resul tats> 

Si nous devions concevoir un objet JavaScript qui permettrait de recreer une structure 
equivalente a ce document XML, il serait alors constitue d'un objet principal contenant 
une seule propriete dont la cle serait nominee resultats dans laquelle nous aurions un 
autre objet contenant les proprietes du nom et du gain (voir code 12-7). 

Code 12-7 : 

objetJS0N= 
{ 

"resultats" : 
{ 

"nom": "Def ranee" , 

"gain":87 
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Le format JSON, base sur la syntaxe des objets JavaScript, reprend une partie de cette 
syntaxe mais sans le nom de la variable ni l'operateur d' affectation (=) et le point virgule 
qui cloture 1' instruction (revoir si besoin la syntaxe des objets JS dans le chapitre 19 consa- 
cre au JavaScript dans la partie 4 sur les ressources technologiques). 

Nous pouvons done deduire que la structure JSON equivalente a l'exemple precedent est 
semblable a celle du code 12-8 ci-dessous. 

Code 12-8 : 



"resultats" : 
{ 

"nom" : "Def ranee" , 
"gain" :87 
} 
} 

Pour materialiser en PHP cette nouvelle structure de donnees dans une chaine de caracte- 
res qui est envoyee a 1' application cliente et y integrer les valeurs issues du traitement 
serveur (nom receptionne par le client dans la variable $nom et montant aleatoire dans la 
variable $gai n) nous allons utiliser une serie de concatenation comme l'illustre le code ci- 
dessous (l'ensemble etant sauvegarde dans la variable Sresultat). 

$resultat=' {"resultats" : {"nom" : " ' .$nom. ' " , "gain" : ' . $gain. ' }} ' ; 

Ainsi, la chaine de caracteres de la reponse du serveur est semblable a celle de l'exemple 
du code 12-8. La reponse etant maintenant prete a etre renvoyee au navigateur, la proce- 
dure d'encodage peut done se resumer a cette seule ligne d' instruction. Apres cette modi- 
fication, le fichier PHP doit etre semblable au code 12-9 ci-dessous. 

Code 12-9 : fichier gainAleatoire.php apres modification : 

header( "Content-Type: text/plain ; charset=utf-8" ) ; 

header( "Cache-Control : no-cache , private"); 

header( "Pragma : no-cache"); 

sleep(2); 

if(isset($_REQUEST['nom'])) $nom=$_REQUEST['nom'] ; 

else $nom="inconnu" ; 

$gain = rand(O.lOO); 

$resultat='{"resultats":{"nom":"' .$nom. '"."gain": ' .$gain. '}}' ; 

echo Sresultat; 

Nous allons maintenant passer cote client pour mettre en place le decodage JSON de 
cette reponse afin de pouvoir actualiser les donnees de la page de 1' application en conse- 
quence. Ouvrez pour cela le fichier fonctionsMachine. js et localisez la fonction actual i ser- 
PageO. 

Le format JSON s'appuyant sur la syntaxe des objets JavaScript (comme nous venons de 
le voir), il est maintenant tres simple de transformer la reponse du serveur (actuellement 
sous forme d'une chaine de caracteres semblable a celle de l'exemple du code 12-8) en 
un objet JavaScript equivalent qui devrait reprendre la forme de l'objet JavaScript a partir 
duquel nous sommes parti pour elaborer la syntaxe de la chaine de caracteres JSON (voir 
code 12-7). 
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Pour convertir cette chaine en un objet, nous pouvons simplement utiliser la fonction 
JavaScript eval ( ) en passant comme argument la chaine a convertir. 

var objetJSON=eval ( '( '+nouveauResultat+' ) ' ) ; 

Vous remarquez dans l'instruction ci-dessus que l'argument passe a la fonction eval ( ) est 
lui-meme encadre par une deuxieme serie de parentheses, ceci afin d'indiquer qu'il s'agit 
d'une expression a evaluer et non d'une instruction a executer. 

Une fois l'objet JSON recree, il suftit d'utiliser la syntaxe pointee qui permet de lire 
les proprietes d'un objet JavaScript afin d'obtenir les valeurs du gain et le nom du 
joueur. 

Iva r gai nTxt=ob jet JSON . resul tats .gain; 
var gagnantTxt=ob jet JSON. resul tats. nom; 

Apres ces modifications, la fonction actual iserPage( ) devrait etre semblable au code 12-10 
ci-dessous. 

Code 12-10 : 

function actualiserPaget ) { 
if (objetXHR.readyState == 4) { 
if (objetXHR. status == 200) { 

var nouveauResul tat = objetXHR. responseText; 

var objetJS0N=eval ( '( '+nouveauResultat+' )' ) ; 

var gai nTxt=ob jet JSON . resul tats .gain; 

var gagnantTxt=ob jet JSON . resul tats . nom; 

rempl acerContenuC resul tat" .gainTxt) ; 

rempl acerContenuC'gagnant" .gagnantTxt) ; 

document. get Element By Id ("info") . style. vis ibility =" visible" ; 

//gestion du bouton et du chargeur 

document. get Element By Id ("button" ) . di sabl ed= false; 

document. get Element By Id ("charge") .style.visibil ity=" hidden" ; 
} 
} 
} 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 



Test du systeme 



Sous Dreamweaver, ouvrez la page i ndex . html dans le navigateur Firefox en appuyant sur 
la touche F12. Le fonctionnement du nouveau systeme doit etre exactement le meme que 
celui de 1' atelier 12-2 precedent, hormis le fait que le transfert des resultats est cette fois 
effectue a l'aide de donnees au format JSON. 

Pour visualiser les donnees renvoyees par le serveur lors de la reponse, nous vous 
conseillons d'activer Firebug et de cliquer sur l'onglet Console. Saisissez ensuite votre 
nom et cliquez sur le bouton JOUER. Une nouvelle requete envoyee a gai nAl eatoi re . php 
doit alors apparaitre dans la fenetre de l'onglet Console. Cliquez sur le + qui precede le 
nom du fichier pour le deplier puis sur l'onglet Response. Vous devriez y voir la reponse 
au format JSON renvoyee par le serveur (voir figure 12-4). 
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7e5? du transfert d'une reponse JSON 



Atelier 12-4 : requete avec reponse en JSON avec bibliotheques 
externes 

Composition du systeme 

Dans l'atelier precedent, nous avons presente une solution tres simple pour effectuer le 
transfert d'une reponse serveur au format JSON. 

Cependant, 1' utilisation de la fonction eval ( ) cote client presente des problemes de secu- 
rite. En effet, aucun controle n'est effectue afin de verifier que le contenu de la reponse ne 
contient pas des scripts malveillants, ce qui pourrait avoir des consequences regrettables 
pour votre site... 

De meme, cote serveur nous avons realise nous-meme 1' elaboration de la reponse au 
format JSON. Cela a ete une tache relativement facile a developper mais imaginez que la 
reponse soit beaucoup plus complexe ou encore que la structure de cette reponse soit 
amenee a changer d'une requete a l'autre. II deviendrait alors tres complique d'elaborer 
une reponse JSON correspondante. 

La solution a ces deux problemes consiste a utiliser des bibliotheques externes (en JS 
cote client et en PHP cote serveur) qui prennent en charge les taches d'encodage ou de 
decodage au format JSON. Nous avons deja presente ces deux bibliotheques dans 
l'atelier 11-5 dans lequel nous les avons exploiters pour envoyer les parametres d'une 
requete au format JSON du navigateur vers le serveur. Nous allons maintenant les utiliser 
dans le sens inverse, afin d' effectuer le transfert de la reponse du serveur vers le navigateur 
au format JSON. 

Cette structure est composee : 

• d'une page HTML (index.html) identique a celle de l'atelier 12-3 ; 
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• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (f oncti onsMachi ne . j s) qui contient les fonctions specifiques a l'application 
Ajax de la machine a sous dont la structure de base avant sa modification est identique 
a celle de 1' atelier 12-3 ; 

• d'une bibliotheque externe Json(json.js)quenousavonsdejautiliseedansl'atelier 11-5 ; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celui de 
1' atelier 12-3 mais qui va etre modifie pour assurer l'encodage automatique des donnees 
JSON a envoyer ; 

• d'une bibliotheque externe JSON-PHP (JSON.php) que nous avons deja utilisee dans 
P atelier 11-5 ; 

• d'une feuille de styles (styl e . ess) identique a celle de Patelier 12-3 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du systeme est strictement identique a celui de Patelier 12-3 que nous 
venons de realiser hormis le fait que l'encodage (cote serveur) et le decodage (cote 
client) au format JSON sont realises a Paide de bibliotheques externes. 

Conception du systeme 

Ouvrez la page HPML de Patelier 12-3 (i ndex . html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chapl2/atelierl2-4/. Copiez ensuite les autres 
fichiers de Patelier precedent dans ce nouveau dossier. 

Commenfons par copier les bibliotheques j s on. j s et JSON.php utilisees dans Patelier 11-5 
dans le meme repertoire que celui de Patelier actuel. 

Ouvrez ensuite le programme gainAleatoire.php et ajoutez Pinstruction require_once( ) 
afin de pouvoir disposer de la bibliotheque JSON-PHP dans ce programme serveur. 

require_once( 'JSON.php' ) : 

Avant d' encoder les donnees, il faut d'abord commencer par creer un objet PHP (consti- 
tue de deux tableaux associatifs dans le cas de cet atelier) et ses valeurs correspondant a 
la structure desiree. 

Code 12-11 : creation de l'objet PHP : 

$tableauNomGain=array( 

"nom"=>$nom, 

"gain"=>$gain) ; 
JtableauResultat = arrayt "resul tats"=>$tableauNomGain) ; 

Creez ensuite un objet JSON a 1' aide de laclasse Services_JSON(). 

$objetJS0N = new ServicesJSONO ; 

Une fois les deux objets crees, nous pouvons alors passer a l'encodage a l'aide de la 
methode encodeO de l'objet JSON (l'objet PHP a encoder etant passe en argument de 
cette meme methode). 

$resultat = $objetJSON->encode($tableauResultat) ; 
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La variable $resul tat contient desormais une chaine de caracteres formatee en JSON qui 
devrait etre semblable a celle que nous avons realisee par concatenation dans 1' atelier 
precedent (revoir si besoin le code 12-8). 

Une fois les modifications effectuees, le fichier PHP devrait etre semblable au code 12-12. 

Code 12-12 : fichier gainAleatoire.php apres modification : 

header("Content-Type: text/plain ; charset=utf-8" ) ; 

headerC'Cache-Control : no-cache , private"); 

header( "Pragma: no-cache"); 

sleep(2); 

i f ( i sset ( $_REQUEST[ ' nom ' ] ) ) $nom=$_REQUEST[ ' nom ' ] ; 

else $nom="inconnu" ; 

$gain = rand(0,100); 

reqiri re_once( 'JSON.php' ); 

$tableauNomGain=array( 

"nom"=>$nom, 

"gain"=>$gain); 
$tableauResultat = array("resultats"=>$tableauNomGain) ; 
$objetJS0N = new Services_0SON( ); 
$resultat = $objetOSON->encode($tableauResultat) ; 
echo Sresultat; 

Comme dans l'atelier 11-5, nous vous signalons que l'extension json est desormais integree 
au PHP 5.2 et versions ulterieures. II est done possible de se passer de la bibliotheque 
JSON-PHP dans ce cas. Le script correspondant a cette seconde alternative est alors 
semblable a celui du code 12-13. 

Code 12-13 : fichier gainAleatoire.php pour PHP 5.2 et plus exclusivement : 

header("Content-Type: text/plain ; charset=utf-8" ) ; 

headerC'Cache-Control : no-cache , private"); 

header( "Pragma: no-cache"); 

sleep(2); 

i f ( i sset ( $_REQUEST[ ' nom ' ] ) ) $nom=$_REQUEST[ ' nom ' ] ; 

else $nom="inconnu" ; 

$gain = rand(0,100); 

$tableauNomGain=array( 

"nom"=>$nom, 

"gain"=>$gain); 
$tableauResultat = array("resultats"=>$tableauNomGain) ; 
$resultat = json_encode($tableauResultat) ; 
echo $resultat; 

Les modifications du programme serveur sont maintenant terminees et vous pouvez enre- 
gistrer le fichier gainAleatoire.php, nous allons maintenant nous interesser au decodage 
JSON cote client et ouvrir pour cela les fichiers index.html et fonctionsMachine.js. 

Dans le fichier index.html, ajoutez une balise <script> de sorte a faire reference a notre 
bibliotheque j son . j s. 

<script type="text/javascript" src="json. js"X/script> 

Localisez ensuite la fonction de rappel du moteur Ajax nommee actual i serPage( ) dans le 
fichier fonctionsMachine.js. Cette fonction etant appelee lors de la reception de la 
reponse par le navigateur, e'est ici que nous allons mettre en place le processus de deco- 
dage des donnees JSON. Pour cela, nous allons appliquer la methode parseJSONO de la 
bibliotheque a la reponse retournee par le serveur (reponse actuellement enregistree dans 
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la variable nouveauResultat). Cette instruction aura pour effet de decoder la chaine de 
caracteres JSON de la reponse et de creer un objet JSON en rapport (dans objetJSON). 

var objetJSON=nouveauResultat.parseJSON( ); 

Une fois l'objet recree, il est alors facile d'acceder a ses proprietes pour recuperer les 
informations necessaires a l'actualisation de la page de l'application (a savoir le gain et 
le nom du joueur). 

Iva r gai nTxt=ob jet JSON . resul tats .gain; 
var gagnantTxt=ob jet JSON. resul tats. nom; 

Apres ces modifications, la fonction actual 1 serPage( ) devrait etre semblable au code 12-14 : 

Code 12-14 : fonction actual iserPageO : 

function actual iserPaget ) { 
if (objetXHR.readyState == 4) { 
if (objetXHR. status == 200) { 

var nouveauResultat = objetXHR. responseText; 

var objetJSON=nouveauResultat.parseJSON( ); 

var gai nTxt=ob jet JSON. resul tats. gain; 

var gagnantTxt=ob jet JSON . resul tats . nom; 

rempl acerContenuC resul tat" .gainTxt) ; 

rempl acerContenuC'gagnant" .gagnantTxt) ; 

document. get Element By Id ( "info") . style. vis ibil ity=" visible" ; 

//gestion du bouton et du chargeur 

document. get Element By Id ("button" ) . di sabl ed= fal se; 

document. get Element By Id ("charge" ) .style. vi si bil ity=" hidden" ; 
} 
} 
} 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 



Test du systeme 



Sous Dreamweaver, ouvrez la page i ndex . html dans le navigateur Firefox en appuyant sur 
la toucheF12. Le fonctionnement du nouveau systeme est le meme que celui de 
l'atelier 12-3 precedent, hormis le fait que l'encodage et le decodage au format JSON 
sont realises a l'aide de bibliotheques externes. 



Atelier 12-5 : requete avec reponse en XML et conversion 
JSON 

Composition du systeme 

Dans le dernier atelier, nous avons etudie une solution operationnelle pour transferer une 
reponse serveur au format JSON. Cependant, dans certains cas, il n'est pas possible 
d'acceder au code serveur pour configurer le format de la reponse en JSON (c'est notam- 
ment le cas de la plupart des Web services qui mettent a votre disposition un flux de 
donnees en XML et non en JSON). 
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Si, malgre tout, vous desirez quand meme traiter ces flux de donnees en JSON, il est alors 
possible de mettre en place un convertisseur qui permet de transformer le flux XML en 
JSON. Cet atelier vous presente une illustration de cette technique. 

Cette structure est composee : 

• d'une page HTML (index.html) identique a celle de l'atelier 12-4 ; 

• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (fonctionsMachine. js) qui contient les fonctions specifiques a 1' application 
Ajax de la machine a sous dont la structure de base avant sa modification est identique 
a celle de l'atelier 12-4 ; 

• d'une bibliotheque externe de conversion XML vers JSON (xml 2 j son . j s) ; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celui de 
l'atelier 12-2 (renvoi d'une reponse en XML) ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier 12-4 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du systeme est semblable a celui de l'atelier 12-4 que nous venons de 
realiser hormis le fait que le transfert de la reponse est effectue en XML et qu'il est 
ensuite converti en JSON des son arrivee sur le poste client. 

Conception du systeme 

Ouvrez la page HTML de 1' atelier 12-4 (i ndex . html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chapl2/atelierl2-5/. Copiez ensuite les autres 
fichiers de l'atelier precedent dans ce nouveau dossier sauf le fichier gainAleatoire.php 
qui est issu de l'atelier 12-2 (reponse serveur en XML). 

Pour realiser la conversion, nous allons utiliser une bibliotheque externe nommee 
xml 2 j son. Commencez done par telecharger cette bibliotheque sur votre ordinateur puis 
copiez ensuite le fichier xml 2 j son . j s dans le repertoire de 1' atelier en cours. 



Bibliotheque xml2json 

Auteur : Thomas Frank (free software licence GNU) 
Vous pouvez telecharger la bibliotheque xml2json a I'adresse ci-dessous : 
http://www.thomasfrank.se/xml_tojson.html 



Ouvrez le fichier index.html pour y aj outer une balise <script> afinde f aire reference a la 
bibliotheque xml2json.js. 

<script type=" text/ javascript" src="xml2json. js"X/script> 

Le fichier PHP etant issu de l'atelier 12-2, il est deja configure pour renvoyer un docu- 
ment XML contenant les donnees nom et gai n (pour memoire, la structure de ce document 
est semblable a celle de l'exemple du code 12-6). 
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Par contre, nous allons devoir modifier la fonction de rappel du moteur Ajax de sorte a 
integrer le script de conversion. Ouvrez le fichier fonctionsMachine.js et localisez la 
fonction actual iserPageO. La premiere chose a mettre en place est la recuperation du 
document XML envoy e en reponse par le serveur. Contrairement a ce que Ton pourrait 
penser, nous n'allons pas recuperer ce document XML avec la propriete responseXML 
mais avec responseText. En effet, dans notre cas nous desirons disposer du document 
XML sous la forme d'une chaine de caracteres et non pas sous la forme d'un arbre 
DOM XML. 

var nouveauResultat = objetXHR. responseText; 

Des que nous disposons du document XML dans la variable nouveauResultat, nous 
pouvons lui appliquer la methode parseO de la bibliotheque externe xml2json qui 
execute la conversion. 

var objetJS0N=xml2json.parser(nouveauResultat) ; 

Une fois la conversion effectuee, nous disposons du resultat dans un objet JSON et nous 
pouvons ainsi facilement lire ses proprietes en utilisant la syntaxe pointee appliquee a 
1' objet comme l'illustre le code ci-dessous. 

I var ga i nTxt=ob jet JSON . resul tats .gain; 
var gagnantTxt=objetOSON. resul tats. nom; 

La nouvelle fonction actual iserPageO devrait etre maintenant semblable a celle du 
code 12-15. 

Code 12-15 : 

function actual iserPaget ) { 
if (objetXHR. readyState == 4) { 
if (objetXHR. status == 200) { 

var nouveauResultat = objetXHR. responseText; 

var ob jet JS0N=xml 2 j son. parser (nouveauResultat); 

var gainTxt=objetOSON. resul tats. gain; 

var gagnantTxt=ob jet JSON. resul tats. nom; 

rempl acerContenut" resul tat" .gainTxt) ; 

rempl acerContenut "gagnant" , gagnantTxt) ; 

document .get El ementBy Id ("info ") . style. vi si bil ity=" visible" ; 

//gestion du bouton et du chargeur 

document .get El ementBy Id ("button" ) .disabled= false; 

document. get El ementBy Id ("charge") .style. vi si bil ity=" hidden" ; 
} 
} 
} 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 



Test du systeme 



Sous Dreamweaver, ouvrez la page i ndex . html dans le navigateur Firefox en appuyant sur 
la toucheF12. Le fonctionnement du nouveau systeme est le meme que celui de 
1' atelier 12-4 precedent, hormis le fait que le transfert de la reponse est realise au format 
XML et qu'une conversion JSON est ensuite realisee sur le poste client a l'aide de la 
bibliotheque externe xml2json. 
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Atelier 12-6 : requete avec reponse RSS 
Composition du systeme 

Dans l'atelier 12-2, nous vous avons deja presents un systeme exploitant une reponse du 
serveur au format XML. Nous vous proposons maintenant de voir une application speci- 
fique de ce systeme en realisant un lecteur tres simple de flux RSS. 

Les flux RSS (Really Simple Syndication) permettent a des serveurs fournisseurs d' infor- 
mations de diffuser facilement des articles qui pourront etre ensuite repris par divers sites 
Web ou lus directement avec des applications comme le gestionnaire de messagerie. 

Cette structure est composee : 

• d'une page HTML (index. html) dont la structure est identique a celle de l'atelier 12-2 ; 

• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (fonctionsMachine. js) qui contient les fonctions specifiques a 1' application 
Ajax de la machine a sous dont la structure de base avant modification est identique a 
celle de l'atelier 12-2 ; 

• d'un fichier serveur PHP (gainAleatoire.php) identique a celui de l'atelier 12-2 ; 

• d'un nouveau fichier serveur PHP (proxyRss . php) ; 

• d'une feuille de styles (style. ess) identique a celle de l'atelier 12-2 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du systeme de la machine a sous est strictement identique a celui de 
l'atelier 12-2. Nous allons simplement ajouter un tableau HTML en bas de l'ecran affi- 
chant les differentes actualites que nous allons recuperer sur le site du fournisseur 
d' informations. Chaque item comporte un titre et est configure pour etre cliquable afin 
d'afficher la page d'origine de 1' information. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 12-2 (i ndex . html ) et sauvegardez-la sous le me me nom 
dans un nouveau repertoire nomme /chapl2/atelierl2-6/. Copiez ensuite les autres 
fichiers de l'atelier precedent dans ce nouveau dossier. 

Nous allons commencer par ajouter le tableau HTML qui va receptionner les nouvelles 
dans la page index.html. Pour cela, ouvrez le fichier index.html et placez le code 12-16 en 
bas de la page juste apres la balise de fermeture de la zone <di v> d'identifiant page. 

Code 12-16 : balises du tableau HTML destine a afficher les actualites du flux RSS : 

<div id="nouvel les"> 
<table width="400" border="l" al ign="center" cell spacing="0"> 
<tbody id="tableRss" > 
<tr> 
<td> LISTE DE NOUVELLES RSS </td> 
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</tr> 
</tbody> 

</table> 
</div> 

Afin d'etre en conformite avec le W3C, nous avons ajoute une balise <tbody> qui 
regroupe les differentes lignes du corps du tableau (voir l'encadre ci-dessous pour plus 
d'information sur la balise tbody). De meme, nous avons configure un identifiant 
tableRss pour cette meme balise afin de pouvoir y ajouter par la suite les futures lignes 
qui contiendront les titres des actualites. 



Balises thead, tbody et tfoot 

Ces balises permettent de structurer les donnees dans I'element tabl e. Ainsi, la balise thead permet de 
regrouper les informations concernant I'en-tete du tableau comme un titre ou le nom des colonnes par 
exemple. La balise tbody, quant a elle, permet, de regrouper les differentes lignes du corps du tableau et 
enfin la balise tfoot regroupe des eventuelles remarques ou legendes. 

Le veritable interet de cette nouvelle organisation est de permettre de visualiser les differentes lignes de 
donnees du corps avec un scroll si la taille de la table est importante. Ainsi, vous pouvez faire defiler les 
lignes contenues dans la balise tbody alors que les lignes des balises thead et tfoot restent toujours 
visibles. 



Enregistrez la page index.html et ouvrez maintenant le fichier fonctionsMachine.js. 
Copiez les deux fonctions jouer( ) et actual iserPage( ) et collez-les en bas du fichier afin 
de partir de cette base pour construire le nouveau moteur Ajax pour la gestion du lecteur 
RSS. Renommez la premiere fonction lectureRssO et la deuxieme afficheRssO, puis 
selectionnez les deux fonctions et lancez un Rechercher/Remplacer pour changer le nom 
de l'objet XHR actuel en objetXHR2. 

Modifiez ensuite le second argument de la methode openO en le remplacant par 
proxyRss.php qui permet d'assurer la liaison avec le serveur fournisseur d'information. 
Modifiez aussi le nom de la declaration de la fonction de rappel pour qu'elle corresponde 
avec celui de la seconde fonction du moteur soit afficheRss. 

IobjetXHR2.open("get" , "proxyRss.php" , true) ; 
objetXHR2.onreadystatechange = afficheRss; 

Une fois modifiee, la fonction 1 ectureRss( ) doit etre semblable au code 12-17. 

Code 12-17 : fonction lectureRssO : 

function lectureRssO ( 

objetXHR2 = creationXHR( ) ; 

objetXHR2. open ("get" ."proxyRss.php" , true) ; 

objetXHR2.onreadystatechange = afficheRss; 

objetXHR2.send(null); 

setTimeout( "lectureRssO ",6000) ; 
) 

Pour assurer le rafraichissement des actualites d'une maniere periodique, nous allons 
configurer en bas de la fonction du moteur Ajax une instruction setTimeOut( ) qui permet 
d'appeler la fonction dans laquelle elle se trouve toutes les 6 secondes. Pour declencher 



Applications Ajax-PHP avec reponses HTML, XML, JSON et RSS 

Chapitre 12 

cette temporisation, il faut appeler la fonction une premiere fois. Pour cela, nous allons 
ajouter un appel de 1 ectureRss( ) dans la fonction testerNavigateurt ) qui est appelee a la 
fin du chargement de la page index.html (voir code 12-18). 

Code 12-18 : ajout de l'appel de lectureRssO : 

function testerNavigateur( ) { 

lectureRss( ) ; 



Proxy et serveurs mandataires 

Les applications Ajax ne peuvent pas diffuser directement des informations issues d'un autre serveur Web 
que celui sur lequel elles sont installees. Ces restrictions de securite sont imposees par les navigateurs 
mais peuvent etre contournees en utilisant un serveur relais qui se charge de recuperer les informations 
sur le site externe. L'application Ajax peut ensuite communiquer avec le serveur relais et disposer ainsi 
des informations mises a sa disposition. 



Passons maintenant cote serveur pour creer le fichier PHP qui fait office de proxy 
(voir encadre) entre le client et le serveur fournisseur d' information. Creez un 
nouveau fichier PHP et enregistrez-le sous le nom proxyRss.php. Configurez ses en-tetes 
pour bloquer la mise en cache et pour signaler que le contenu de la reponse renvoyee est 
au format XML. 

|header( "Content-Type: text/xml ") ; 
header( "Cache-Control : no-cache , private"); 
headert "Pragma: no-cache"); 

Pour acceder au fichier XML du flux RSS, nous allons utiliser simplement la fonction 
readfileO qui permet d'afficher tout le contenu du fichier XML al'ecran. Pour vos tests, 
nous vous conseillons d' appeler directement ce fichier depuis le navigate ur pour vous 
assurer que la source XML du RSS est bien formee. Dans le cadre de cet ouvrage, nous 
avons utilise un flux RSS du site www.infos-du-net.com mais vous pouvez bien sfir utiliser 
un autre flux RSS 2.0 si vous le desirez. 

readfileC http://www.inf os -du-net.com/feeds/1602-rss2-autres.xml ") ; 

Le fichier proxyRss . php est maintenant termine et devrait etre semblable au code 12-19. 

Code 12-19 : fichier proxyRss.php : 

header( "Content-Type: text/xml ") ; 

headert "Cache-Control : no-cache , private"); 

header( "Pragma: no-cache"); 

readfileC http://www.inf os-du-net.com/feeds/1602-rss2-autres.xml ") ; 

Avant de commencer a developper la fonction de rappel du moteur Ajax, nous vous invi- 
tons a faire un premier test du fichier ProxyRss.php que nous venons de realiser dans un 
navigateur (voir figure 12-5). Si le document XML du flux RSS est bien forme, le navi- 
gateur doit afficher les differentes balises des informations des actualites d'une maniere 
hierarchique. 
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Figure 12-5 

Jes? du fichier proxyRss.php appele directement 

II existe plusieurs formats de flux RSS mais dans le cadre de cet atelier, nous allons utili- 
ser un format RSS 2.0. Son contenu comprend toujours un en-tete et une liste d'items. Si 
nous representions une structure minimale du document, nous aurions un document 
semblable au code 12-20. 

Code 12-20 : structure minimale d'un flux RSS 2.0 : 

<rss version="2.0"> 
<channel> 
<title>Infos du net - Autres</title> 
<description>Actual ite de 1' Internet</description> 
<link/> 
<item> 
<title>Google lance gmail</title> 
<description>...</description> 
<1 ink>http://www.google.com</link> 
</item> 
<item> 
<title>...</title> 
<description>.„</description> 
<link>...</link> 
</item> 
<channel> 
</rss> 

Revenons maintenant cote client pour configurer la fonction de rappel du moteur Ajax 
qui permet de recuperer et mettre en forme les nouvelles du flux RSS. 
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L'objectif de la fonction de rappel est de recuperer le contenu des balises titl e et 1 ink de 
chaque item (voir code 12-20). Ces informations devront ensuite etre integrees dans le 
tableau situe en bas de la page index.html de sorte que l'utilisateur puisse acceder a la 
page d'origine d'une actualite en cliquant sur son titre. 

Ouvrez de nouveau le fichier fonctionMachine. js et localisez la fonction afficheRssO. 
Configurez une instruction pour recuperer le document XML dans une variable nommee 

nouveauRss. 

var nouveauRss=objetXHR2.responseXML; 

Creez ensuite un pointeur sur la liste des elements <item> afin de pouvoir ensuite acceder 
a chaque item en modifiant l'indice du tableau de variable I1steltem[l], listeltem[2]... 

var liste I tem=nouveauRss.getElementsByTagName( "item"); 

Nous allons ensuite creer une boucle forO afin de parcourir tous les items du document 
RSS. A chaque tour de boucle, nous allons recuperer le titre et le lien de l'item pour 
ensuite les communiquer en parametres a une fonction nouvel 1 eLi gne qui permet de creer 
une ligne supplementaire du tableau a chaque iteration. 

f or ( i =0 ; i <1 i steltem. 1 ength ; i++) { 

var titre=listeItem[i].getElementsByTagName("title")[0] .firstChild.nodeValue; 

var 1 ien=listeltem[i] .getElementsByTagName("link")[0]. firstChild.nodeValue; 

nouvel 1 eLi gne (tit re, lien) ; 
}//f in du for 

La fonction afficheRssO complete doit ensuite etre semblable au code 12-21 ci-dessous. 

Code 12-21 : fonction afficheRssO : 

function afficheRssO { 
if (objetXHR2.readyState == 4) { 
if (objetXHR2. status == 200) { 
var nouveauRss=objetXHR2.responseXML; 
var 1 isteItem=nouveauRss.getElementsByTagName("item"); 
for(i=0;i<listeItem.length;i++){ 
var titre= listeItem[i].getElementsByTagName("title")[0] .firstChild.nodeValue; 
var 1 ien= 1 isteltem[i] .getElementsByTagName("link")[0]. firstChild.nodeValue; 
nouvel 1 eLi gne( titre, lien) ; 
}//fin du for 
}//fin du if status 
}//fin du if readyState 
}//fin de function 

Nous devons maintenant creer la fonction nouvel 1 eLi gne ( ) qui est appelee a chaque tour 
de la boucle f or O dans la fonction af f i cheRss ( ) . Cette nouvelle fonction doit recuperer le 
titre et le lien de 1' actualite afin de construire une ligne de tableau supplementaire qui 
permettra a l'utilisateur de cliquer sur le titre pour acceder a la page d'origine de la 
nouvelle. 

Pour construire cette ligne, nous allons utiliser les methodes du DOM. Nous commencons 
par creer les elements tr, td, a et text a l'aide de la methode createEl ementO. 

I var nouveauTR=document. createEl ement( 'tr' ); 
var nouveauTD=document. createEl ement( 'td' ); 
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I var nouveauTXT=document.createTextNode(titre); 
var nouveauA=document.createElement( 'a' ); 

Une fois la balise a creee, nous pouvons configurer ses attributs href et target a l'aide de 
lamethode setAttributeO. 

InouveauA.setAttribute( "href .lien); 
nouveauA.setAttribute( 'target' . '_blank' ); 

II faut ensuite attacher successivement tous les elements crees precedemment en respectant 
leurs hierarchies a l'aide de la methode appendChi 1 d( ). 

InouveauA.appendChild(nouveauTXT) ; 
nouveauTD. appendChi Id(nouveauA) ; 
nouveauTR. appendChi Id(nouveauTD) ; 

Enfin l'element tr de la ligne est rattache au tableau par le biais de la balise tbody (dont 
l'identifiant est tabl eRss). 

document. get Element By Id ( "tabl eRss") .appendChi Id (nouveauTR) ; 

Une fois terminee, la fonction nouvel 1 el_i gne( ) doit etre semblable au code 12-22. 

Code 12-22 : fonction nouvel leL1gne() : 

function nouvelleLigne(titre.lien) { 

var nouveauTR=document.createElement( 'tr') ; 

var nouveauTD=document.createElement( 'td' ) ; 

var nouveauTXT=document .createTextNode(titre) ; 

var nouveauA=document. create El ementt 'a ' ) ; 

nouveauA.setAttributet 'href , lien) ; 

nouveauA.setAttributeC 'target' , '_bl ank' ) ; 

nouveauA. appendChi ld(nouveauTXT) ; 

nouveauTD. appendChi IdCnouveauA) ; 

nouveauTR. appendChi Id(nouveauTD) ; 

document. get El ementBy Id ("tabl eRss") . appendChi ld(nouveauTR) ; 
} 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 



Test du systeme 



Sous Dreamweaver, ouvrez la page index.html dans le navigateur Firefox en appuyant 
sur la touche F12. Le fonctionnement du jeu de la machine a sous restera inchange par 
rapport a celui de 1' atelier 12-2 mais avec cette fois un tableau des actualites du flux 
RSS doit apparaitre en bas de l'ecran. Des le chargement de la page, la fonction de 
lecture du flux RSS doit etre appelee et afficher toutes les actualites disponibles sur des 
lignes differentes du tableau HTML (voir figure 12-6). Ces informations seront ensuite 
reactualisees toutes les 6 secondes. 

Si vous cliquez sur l'un des titres du tableau, une nouvelle fenetre doit s'ouvrir et afficher 
la page d'origine de l'actualite. 
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Figure 12-6 
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Applications Ajax-PHP-MySQL 



Dans la pratique, la plupart des systemes stockent leurs informations dans une base de 
donnees. Les applications Ajax-PHP n'echappent pas a cette regie, et nous vous proposons 
dans ce chapitre d'etudier les differentes techniques qui permettent ce type d' interactions 
entre l'application client et la base de donnees. 

Pour illustrer ces techniques, nous allons reprendre notre application de machine a sous 
en ligne a laquelle nous allons associer de nouvelles fonctionnalites qui necessitent la 
mise en oeuvre de differents systemes de communication avec la base de donnees. 



Atelier 1 3-1 : verification instantanee de la saisie dans une base 
de donnees 

Composition du systeme 

La verification instantanee (ou presque) de donnees au fil de la saisie est une illustration 
typique de l'usage que Ton peut faire d'une application Ajax-PHP-MySQL. Pour l'appli- 
quer a notre exemple de machine a sous, nous vous proposons de creer un systeme qui 
permet de verifier a chaque nouveau caractere saisi si le nom du joueur est bien enregistre 
dans la base de donnees des joueurs du club. 

Tant que la requete de verification SQL a la base de donnees n'identifiera pas precise- 
ment le nom du joueur, un message informant l'utilisateur que son nom est inconnu 
s'affichera a l'ecran et le bouton JOUER restera bloque. En revanche, des que le nom est 
reconnu, l'identifiant de l'enregistrement est alors renvoye par le serveur a l'application, 
ce qui va declencher l'affichage d'un message informant l'utilisateur qu'il a ete identifie. 
Le bouton JOUER est ensuite debloque et le joueur peut utiliser l'application comme 
dans les ateliers precedents. 

Cette structure est composee : 

• d'unepage HTML (index.html) dont la structure est identique a celle del 'atelier 10-4 ; 

• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 
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• d'un fichier JS (f onctionsMachi ne . js) qui contient les fonctions specifiques a 1' application 
Ajax de la machine a sous dont la structure de base avant modification est identique a 
celle de 1' atelier 10-4 ; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celle de 
1' atelier 10-4 ; 

• d'un second fichier serveur PHP (nomVerification.php) qui va etre cree dans cet 
atelier ; 

• d'un fichier PHP de connexion a la base de donnees (connexionMysql .php) qui va etre 
cree dans cet atelier ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier 10-4 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du jeu est identique a celui de l'atelier 10-4 que nous allons prendre 
comme base de depart pour effectuer nos modifications. Cependant, la mise en place 
d'une nouvelle fonctionnalite permet d'interroger la base de donnees a chaque saisie 
d'un nouveau caractere dans le champ du nom et d'informer l'utilisateur des qu'il est 
identifie. Le bouton JOUER reste bloque tant que le nom du joueur n'est pas identifie. 



Conception du systeme 



Ressources sur les bases de donnees MySQL 

Avant de passer a la conception de ce systeme, il est fortement conseille d'avoir quelques notions sur la 
structure et le fonctionnement d'une base de donnees. Si ce n'est pas votre cas, nous vous invitons a lire 
au prealable le chapitre 22 dedie aux bases de donnees MySQL que vous pouvez trouver dans la partie 4 
de cet ouvrage. 



Ouvrez la page HTML de 1' atelier 10-4 (i ndex . html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chapl3/atelierl3-l/. Copiez ensuite les autres 
fichiers de l'atelier 10-4 dans ce nouveau dossier. 

Avant de dialoguer avec la base de donnees, nous devons commencer par la creer. Pour 
cela, nous allons utiliser le gestionnaire de base de donnees phpMy Admin, accessible depuis 
le manager de Wamp5 (deuxieme item dans le menu du manager en partant du haut). Une 
fois le gestionnaire ouvert, la partie droite de l'ecran affiche une zone intitulee Creation 
d'une base. Saisissez le nom de la nouvelle base dans ce champ, soit machineasous et 
cliquez sur le bouton Creer. 



Alternative a la creation de la base 

Si vous etes deja initie a I'utilisation de phpMyAdmin et que vous desirez creer rapidement la base de 
donnees joueurs, vous pouvez utiliser le fichier de sauvegarde SQL place dans un repertoire du meme 
nom dans le dossier de cet atelier. 

Pour connaitre la procedure de restitution de la base a I'aide de ce fichier, reportez-vous a la fin du chapi- 
tre 22 sur le langage SQL dans la partie 4 de cet ouvrage. 
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Dans la nouvelle fenetre du gestionnaire, vous devez alors voir une nouvelle zone intitu- 
lee Creation d'une nouvelle table. Saisissez le nom de la premiere table dans ce champ, 
soit joueurs, indiquez 3 pour le nombre de champs et cliquez sur le bouton Creer pour 
lancer la creation de la table. 

Un troisieme ecran doit alors apparaitre (voir figure 13-1), chaque ligne correspondant 
aux caracteristiques d'un des futurs champs de la table. Le premier est dedie a la cle 
primaire de la table : une cle primaire est un champ obligatoire dont le contenu doit etre 
unique et sert de cle de selection pour acceder a un enregistrement precis. Le second est 
un champ texte correspondant au nom du joueur et le troisieme a son prenom. Dans ce 
premier atelier, nous n'aurons pas 1' usage de ce troisieme champ, mais nous le creons 
quand meme maintenant en prevision de sa future utilisation. 
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Figure 13-1 

Creation de la table joueurs (partie de gauche) 



Apres cette rapide presentation de la structure de notre nouvelle table, passons maintenant a 
sa configuration. La premiere colonne, nomtnee Champ, permet de nommer les futures 
colonnes de la table. Saisissez ID pour la premiere ligne afin d'identifier la colonne de la cle 
primaire. Puis saisissez nom et prenom en tete des deux autres lignes. La deuxieme colonne, 
nominee Type permet de choisir le typage que doivent respecter les differentes valeurs du 
champ en rapport. Ainsi, pour celui de la cle primaire ID, nous choisissons INT pour indiquer 
que le type de la cle primaire est un nombre entier. Pour les deux autres champs, nous choi- 
sissons en revanche VARCHAR pour indiquer qu'il s'agit ici de chaines de caracteres. Certains 
types, comme INT suffisent amplement et ne necessitent aucun complement de valeur, mais 
ce n'est pas le cas de VARCHAR pour lequel vous devez obligatoirement indiquer le nombre 
maximum de caracteres que peut contenir la chaine. Dans notre exemple, nous allons indi- 
quer 50 pour les deux champs, ce qui nous semble amplement suffisant pour memoriser le 
nom ou le prenom du joueur. Deplacons nous maintenant sur la droite de l'ecran a l'aide du 
curseur horizontal (voir figure 13-2). Pour la colonne nominee Extra, selectionnez l'option 
auto_i ncrement pour permettre 1' auto-incrementation de la valeur de la cle primaire a chaque 
insertion d'un nouvel enregistrement. Pour les deux autres lignes (nom et prenom), laissez leur 
menu deroulant tel quel sans selectionner d' option. II reste maintenant a preciser le champ ID 
qui va faire office de cle primaire. Pour cela, nous allons cocher le bouton radio de la colonne 
Primaire de cette premiere ligne. Les deux autres colonnes (Unique et Index) permettent de 
preciser qu'un champ peut etre unique ou qu'il est utilise en tant qu' index pour acceder aux 
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enregistrements dans les futures utilisations du systeme. Une cle primaire etant a la fois 
unique et index, il est done inutile de cocher ces deux autres options pour le champ I D. 
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Figure 13-2 

Creation de la table joueurs (partie de droite) 



Eviter les doublons pour les noms 

Si I'application se limitait uniquement a la gestion des joueurs par leur nom, il faudrait alors cocher le 
bouton radio Unique du champ nom pour eviter d'avoir deux fois le meme nom de joueur dans la table. 
Cependant, nous allons voir dans un prochain atelier que nous sommes amenes a gerer des joueurs de la 
meme famille. Dans ce nouveau contexte, chaque enregistrement doit etre identifies par son couple nom- 
prenom et il n'est done plus necessaire de cocher la case Unique pour le champ nom. 



II est inutile de configurer les autres colonnes de cet exemple tres simple mais sachez tout 
de meme que la colonne Interclassement permet de definir l'encodage utilise s'il devait 
etre different de celui de la table ; la colonne Attributs permet d'indiquer, dans le cas de 
nombres, s'ils sont signes ou non ; la colonne Null permet de rendre optionnel un champ 
lors de 1' insertion d'un nouvel enregistrement et enfin le champ Defaut, comme son nom 
l'indique, permet de proposer une valeur par defaut si celle-ci n'est pas renseignee. 

La configuration du tableau joueurs est maintenant terminee. Pour valider vos choix, 
vous devez maintenant cliquer sur le bouton Sauvegarder. Attention : ne cliquez pas sur 
le bouton Executer, ce qui aurait comme effet de creer une ligne de champ supplemen- 
taire. Un message doit ensuite s'afficher, confirmant que la creation de la table a bien ete 
effectuee (voir message ci-dessous). 



Table "machineasous" . "joueurs" a ete cree(e). 
I I 

La table est done creee mais ne contient pas encore de donnees. Pour ajouter de 
nouveaux enregistrements, cliquez sur l'onglet Inserer en haut de l'ecran. Un nouveau 
formulaire apparait alors vous proposant de saisir deux nouveaux enregistrements dans 
cette table. Meme si tous les champs sont accessibles, il n'est pas necessaire de rensei- 
gner celui de la cle primaire I D car nous l'avons configure pour etre auto-incremente. La 
valeur du champ sera ainsi automatiquement renseignee lors de 1' insertion de chaque 
enregistrement. 

Pour les besoins de notre atelier, nous allons vous demander de saisir deux noms et 
prenoms de joueur en vous referant a ceux renseignes dans la figure 13-3. Vous pouvez 
evidemment saisir les noms de votre choix mais si vous desirez que cela corresponde 
avec les visuels de nos tests, nous conseillons de saisir ces memes informations dans 
un premier temps. 
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Figure 13-3 

Insertion de deux utilisateurs dans la table joueurs 

Cliquez cette fois sur le bouton Executer pour confirmer l'insertion de ces deux 
nouveaux utilisateurs. Un message doit alors s'afficher vous indiquant que les enregistre- 
ments ont bien ete ajoutes a la table (voir code ci-dessous). La syntaxe de la requete SQL 
doit, quant a elle, s'afficher en dessous. 

Nombre d'enregistrements inseres : 2 

Notre base est maintenant prete a etre utilisee, si toutefois vous desirez avoir un apercu 
de son contenu avant de quitter le gestionnaire, vous pouvez le faire en cliquant sur 
l'onglet Afficher (voir figure 13-4). 
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Figure 13-4 

Contenu de la table joueurs 
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Vous pouvez aussi remarquer qu'une icone representant la nouvelle table est desormais 
presente dans la partie de gauche du gestionnaire. Celle-ci vous pennettra par la suite 
d'acceder directement a la table joueurs (si vous cliquez sur l'icone, vous afficherez le 
contenu de la table alors que si vous cliquez sur son nom, c'est sa structure qui s'affi- 
chera). Cependant, rappelez-vous que quel que soit 1' ecran que vous visualisez dans 
phpMy Admin, vous avez la possibilite de revenir rapidement a une page « tableau de 
bord » qui rassemble dans le meme ecran toutes les actions possibles (ajout, suppression, 
modification du contenu comme de la structure des tables) et cela sur toutes les futures 
tables de votre base. Pour cela, il suffit de cliquer sur le nom de la base de donnees situe 
dans la partie gauche du gestionnaire (voir repere 1 de la figure 13-5). 
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Figure 13-5 

En cliquant sur le nom de la base dans la partie gauche de I 'ecran, vous accedez rapidement au tableau recapi- 
tulatifdes differentes actions que vous pouvez ejfectuer sur les differentes tables de la base. 



Utilisation de phpMyAdmin 

Si par la suite vous desirez faire des modifications de la structure de cette table ou de son contenu, vous 
pouvez trouver les procedures relatives a ces actions dans le chapitre 22 consacre a SQL de la partie 4 
de cet ouvrage. 



Passons maintenant aux modifications des fichiers. Pour pouvoir acceder a cette base, il 
est necessaire de creer une connexion entre le serveur Web (ou se trouvent les fichiers 
PHP) et le serveur de base de donnees. En production, un nom d'utilisateur de la base et 
le mot de passe en rapport sont obligatoires pour s'identifier a la base de donnees, pour 
des raisons de securite evidentes. Cependant, dans le cadre de nos ateliers, nous allons 
utiliser le nom d'utilisateur cree par defaut lors de 1' installation de Wamp. Cet utilisateur 
generique se nomme root et ne necessite pas de mot de passe (pour creer un utilisateur 
specifique, reportez-vous au chapitre sur le SQL). Une autre information dont nous 
allons avoir besoin pour creer cette connexion est le nom du domaine sur lequel le 
serveur de base de donnees est installe. En general, ce dernier est installe sur la meme 
machine que le serveur Web et il suffit d'indiquer 1 ocal host pour que le serveur de base 
de donnees soit localise. Cependant, sachez que selon votre hebergeur vous pouvez avoir 
des organisations differentes et il faut alors utiliser le domaine sur lequel se trouve la base 
de donnees pour realiser une connexion. Ces trois informations vont ainsi nous permettre 
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de creer un identifiant de connexion qui devra etre exploite par la suite dans les differents 
fichiers PHP pour lesquels nous aurons besoin d'acceder a la base de donnees. Aussi, est- 
il judicieux de les stacker dans un fichier independant des autres fichiers PHP afin de 
pouvoir modifier ces parametres en un seul endroit au cas ou vous devriez transferer 
votre systeme sur un autre serveur Web. 

Nous allons done creer un fichier connexionMysql.php dans lequel nous allons centraliser 
ces informations ainsi que la fonction de creation de l'identifiant (SconnexionMysql) et le 
nom de la base de donnees ($base) qui sont, eux aussi, communs a tous les programmes 
PHP qui necessitent une connexion a la base. Le contenu de ce fichier de connexion est 
semblable au code 13-1 et nous vous invitons a le creer des maintenant. 

Code 13-1 : connexionMysql . php, fichier de connexion a la base de donnees : 

# Nom du f ichier="connexionMysql .php" 

Iserveur = "local host"; 

$base = "machineasous"; 

$utilisateur = "root"; 

Imotedepasse = ""; 

$connexionMysql = mysql_connect($serveur, $util isateur, $motdepasse) ; 



Ressources sur des fonctions PHP dediees a MySQL 

Pour obtenir plus d'informations sur les fonctions PHP dediees a MySQL, vous pouvez vous reporter au 
tableau 21-18 du chapitre consacre a PHP. 



Pour mettre en oeuvre cette nouvelle fonctionnalite de verification du nom du joueur, 
nous allons creer un nouveau fichier PHP. Celui-ci se nommera nomVerifi cation. php et 
comportera au debut les memes instructions que le precedent fichier gainAleatoire.php 
destinees au blocage du cache et a la recuperation de la variable nom envoyee dans l'URL 
par la requete Ajax (voir code 13-2). 

Saisissons a la suite de cette partie les instructions specifiques a notre application. Nous 
devons commencer par faire reference au fichier de connexion pour l'inclure dans le 
programme et disposer ainsi des variables qui y sont declarees. 

require_once( 'connexionMysql .php') ; 

II faut ensuite selectionner la base sur laquelle nous desirons intervenir a l'aide de la 
fonction mysql_select_db( ) en rappelant la variable $base qui contient son nom (memo- 
rise precedemment dans le fichier de connexion). 

mysql_select_db($base) ; 

Dans notre exemple, nous desirons savoir si le nom envoye en parametre par la requete 
Ajax ($nom) est present dans le champ nom de la table joueurs que nous avons precedem- 
ment creee. Nous allons done creer une requete SQL en rapport en y integrant la variable $nom 
dans la clause WHERE. Le resultat de cette derniere est memorise dans une variable 
SrequeteSQL pour une meilleure lisibilite du code. Elle est ensuite soumise au serveur a 
l'aide de la fonction mysql_query( ) qui renverra un pointeur en memoire sur une liste de 
resultats (SreponseSQL), si toutefois le nom en question a ete trouve. 

I$requeteSQL="SELECT ID FROM joueurs WHERE nom='".$nom. ; 
IreponseSQL = mysql_query($requeteSQL) ; 

Le pointeur SreponseSQL n'etant pas exploitable directement, il est necessaire de transfe- 
rer les resultats ainsi pointes en memoire dans un tableau de variables afin de pouvoir 
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acceder aux differents champs de l'enregistrement correspondant a la requete SQL (dans 
notre cas, nous n'avons que le champ ID dans cet enregistrement car la requete SQL a ete 
configured de la sorte : SELECT ID). Pour realiser cette transformation, nous allons utiliser 
une fonction PHP de type mysql_fetch_xxx( ) soit mysql_fetch_array( ) qui a l'avantage de 
creer un double tableau, a la fois associatif (avec pour cle les noms des champs) et indice 
(mieux adapte en cas de parcours par une boucle). 

$enregistrement=mysql_fetcli_array($reponseSQL) : 

La variable Senregistrement est done un tableau dans lequel nous pouvons recuperer les 
resultats en precisant simplement le nom du champ desire en tant que cle du tableau asso- 
ciatif. Par exemple, pour recuperer 1'identifiant du joueur qui a ete reconnu, nous pouvons 
utiliser 1' instruction suivante : 

$ID=$enregistrement["ID"]; 

Cependant, avant de memoriser cet identifiant, il faut effectuer un test afin de s' assurer 
qu'il existe bien un resultat et dans le cas ou le joueur n'a pas encore ete reconnu, retour- 
ner la valeur zero en guise d' identifiant. Nous allons realiser cette verification en exploi- 
tant la fonction mysql_num_rows() qui est censee contenir le nombre d'enregistrements 
renvoyes par le serveur de base de donnees en reponse a la requete SQL. Si celui-ci est 
superieur a zero, nous affectons 1'identifiant de l'enregistrement retourne a la variable 
SID, sinon nous affectons la valeur a cette meme variable. 

if (mysql_num_rows($reponseSQL)>0) 

$ID=$enregistrement["ID"] ; 
else 

$ID=0; 
echo $ID ; 

La creation du nouveau fichier PHP est desormais terminee, vous pouvez l'enregistrer. 
Son contenu doit etre semblable a celui du code 13-2. 

Code 13-2 : nomVerification.php, fichier permettant la verification du nom du joueur dans 
la base de donnees : 



header("Content-Type: text/plain ; charset=utf-8" ) ; 

headerC'Cache-Control : no-cache , private"); 

header( "Pragma: no-cache"); 

if(isset($_REQUEST['nora'])) $nom=$_REQUEST[ 'nom'] ; 

else $nom="inconnu" ; 

require_once( 'connexionMysql .php' ) ; 

mysql_select_db($base) ; 

$requeteSQL="SELECT ID FROM joueurs WHERE nom='".$nom."'"; 

$reponseSQL = mysql_query($requeteSQL) ; 

$enregistrement=mysql_fetch_array($reponseSQL) ; 

if (mysql_num_rows($reponseSQL)>0) 

$ID=$enregistrement["ID"] ; 
else 

$ID=0; 
echo $ID ; 

Passons maintenant cote client pour creer le nouveau moteur Ajax qui va sollicker ce 
fichier nomVerification.php. Pour cela, ouvrez le fichier fonctionsMachine. js et localisez 
la fonction detecterNavigateur( ). Pour memoire, cette fonction (initialement creee pour 
identifier si le navigateur supporte les requetes Ajax des l'ouverture de la page) est appe- 
lee des le chargement de la page dans le navigateur. Nous allons done 1' exploiter pour y 
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inserer la declaration du gestionnaire d'evenement qui va prendre en charge la detection 
de la saisie des caracteres dans le champ nom. Pour cela, nous allons placer a la fin de cette 
fonction un gestionnaire d'evenement onkeyup applique au champ de saisie (l'element 
nom) afin de lui associer l'appel de la fonction nomVerifier a chaque fois que cet evenement 
se produira. 

document. get Element By Id ("nom" ) .onkeyup=nomVerifier; 

Dans cette fonction, nous allons devoir configurer un moteur Ajax afin de creer un nouvel 
objet XHR et envoyer la requete Ajax au fichier nomVeri f i cati on . php, avec comme para- 
metre le nom en cours de saisie a chaque fois qu'un nouveau caractere est ajoute. La 
structure de ce script est semblable a celle de la fonction jouerO qui exerce la meme 
fonction dans le premier moteur Ajax deja en place. Nous allons done copier son contenu 
dans notre nouvelle fonction nomVerifierO puis lancer une action Rechercher/Remplacer 
(localiser au contenu de la fonction) pour remplacer le nom de l'objet objetXHR par objetXHR2. 



Simplification de la fonction jouer() 

Avec I'ajout de la nouvelle fonctionnalite de verification bloquante lors de la saisie du nom, le test de 
controle de la presence d'un nom dans le champ place en debut de la fonction jouer( ) n'est desormais 
plus necessaire. Vous pouvez done simplifier cette fonction en supprimant les instructions correspondant 
a cette fonctionnalite devenue inutile. 



Nettoyez ensuite ce code des instructions qui ne sont plus necessaires dans le contexte de 
ce nouveau moteur (comme le controle de la saisie du nom ou la gestion de 1' animation 
du chargeur, par exemple). Modifiez ensuite le nom de la fonction de rappel en le remplacant 
par afficherReponse ainsi que le nom du fichier PHP vers lequel sera envoyee la requete 
en le remplacant par nomVerification.php. Une fois les mises a jour effectuees, la 
nouvelle fonction devrait etre semblable au code 13-3 ci-apres. 

Code 13-3 : fonction nomVerifierO du fichier fonctionsMachine.js : 

function nomVerifierO 

objetXHR2 = creationXHRO ; 

var temps = new DateO.getTimeO; 

var parametres = "nom="+ codeContenuC'nom") + 
"&anticache="+temps ; 

objetXHR2.open( "get" , "nomVerification.php?"+parametres, true) ; 

objetXHR2.onreadystatechange = afficherReponse; 

document. getElementBy Id ( "button") .disabled^ true; 

objetXHR2.send(null ) ; // Envoi de la requete 
} 

II nous reste maintenant a creer la fonction de rappel liee a ce second moteur Ajax. Cette 
fois nous allons copier la fonction de rappel actual i serPage( ) afin de la prendre comme 
base de depart pour la nouvelle fonction de rappel de ce second moteur Ajax. Des que la 
nouvelle fonction est copiee, renommez-le afficherReponseO. Le but de cette fonction 
etant d'informer l'utilisateur qu'il est reconnu et de debloquer le bouton JOUER des 
qu'il est identifie, nous allons tester la valeur de l'identifiant (ID) renvoyee par le serveur 
(et recuperee dans la variable nouveauResultat) pour conditionner ces actions. Le bloc 
ainsi defini doit alors contenir les instructions ci-dessous : 

if (nouveauResul tat!=0) { 

remplacerContenu( "message". "Joueur identifie"); 

document . getEl ementBy Id( "button" ) . di sabl ed= f al se ; 
} 
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Dans le cas contraire, un message different doit etre affiche afin d'indiquer que le nom 
saisi est inconnu et le bouton JOUER doit etre bloque. Pour realiser ces actions, le bloc 
alternatif contient les instructions suivantes : 

else { 
remplacerContenuC'message", "Joueur inconnu"); 
document. getElementBy Id ("button") .disabled= true; 

} 

Une fois les modifications de cette fonction de rappel realisees, celle-ci devrait etre 
semblable au code 13-4 (auxquelles vont s'ajouter des instructions secondaires sur la 
mise en forme du texte ou son affichage). 

Code 13-4 : fonction afficherReponseO du fichier fonctionsMachine. js : 

function afficherReponseO { 
if (objetXHR2.readyState == 4) { 
if (objetXHR2. status == 200) { 
var nouveauResul tat = objetXHR2. responseText ; 
if (nouveauResul tat!=0) { 

document. getElementBy Id( "message") . style. vi si bil ity=" visible" ; 
remplacerContenuC'message". "Joueur identifie"); 
document .get El ementById( "message") .style. col or=" green" ; 
document . getEl ementBy Id ( "button" ) . di sabl ed= f al se ; 
}else{ 

document. getEl ementBy Id( "message") . style. vi si bil ity=" visible" ; 
remplacerContenuC'message". "Joueur inconnu"); 
document. getEl ementBy Id( "message") .style. colore "red" ; 
document. getEl ementBy Id ( "button" ).di sabl ed= true; 
} 
} 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 



Ameliorations possibles du systeme 

Dans notre exemple, la table ne contient que deux enregistrements et nous sommes en 
local. Cependant, imaginez que votre club de jeux remporte un franc succes et que vous 
deviez gerer 1 000 voire 10 0000 joueurs . . . Le temps de recherche dans la base de donnees 
serait alors plus long et pourrait freiner considerablement la reactivite du systeme, 
notamment au debut de la frappe pour les noms de quelques lettres qui n'ont aucune 
chance de correspondre a un nom possible de joueur. Pour ameliorer la reactivite du 
systeme dans ce contexte, nous pourrions alors mettre en place un test cote client qui 
verifierait que le nom a soumettre est superieur a 3 caracteres par exemple, sans quoi la 
requete Ajax ne serait pas emise. Vous trouverez ci-dessous un exemple de code qui 
permettrait d'ajouter cette fonctionnalite en debut de la fonction verifNom( ). 

Code 13-5 : option pour la fonction verifNomt ) : 

function verifierNom( ) { 

var taille=document. getEl ementBy Id ("nom") .value. length; 
if(taille<4) { 

document. getEl ementBy Id ("message") .style.visibil ity=" visible" ; 

remplacerContenuC'message", "nombre de caracteres insuffisant"); 
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document. get Element By Id ("message" ) .style. colore "red" ; 
return false; 
} 



) 



Un autre probleme qui pourrait apparaitre si la base devenait trop volumineuse, entrai- 
nant du meme coup un temps de reponse du serveur plus long, serait de saturer le 
systeme avec un grand nombre de requetes si l'utilisateur saisissait rapidement tous les 
caracteres de son nom. Dans ce cas, la solution consiste a mettre en place un systeme de 
declenchement des requetes de verification, non plus a chaque caractere saisi, mais toutes 
les secondes par exemple. Pour mettre en ceuvre ce systeme, une solution simple consiste 
par exemple a remplacer le gestionnaire d'evenement actuel onkeyup du champ nom par un 
onfocus dans la fonction detecterNavigateurO. De cette maniere, il serait possible de 
declencher le controle periodique des que l'utilisateur clique dans le champ, puis d'ajouter 
un temporisateur a la fin de la fonction verifierNom( ) qui rappelle la fonction verifier- 
Nom( ) toutes les secondes, par exemple. 

Code 13-6 : solution alternative pour le gestionnaire d'evenement : 

I function detecterNavigateurO { 
document. getElementById( "nom") .onfocus=verifierNom; 
} 

Code 13-7 : insertion d'un temporisateur pour declencher la fonction toutes les secondes : 

function verifierNomO { 

setTimeout("verifierNom( )",1000) ; // Timer de 1 seconde 
} 



Enfin, si nous partons du principe qu'il s'agit de noms de joueur, ceux-ci ne devraient pas 
contenir de chiffre par exemple. II serait alors judicieux d'ajouter un systeme de controle 
des caracteres saisis cote client. De meme, il serait aussi interessant d'en profiter pour 
filtrer toutes les autres touches du clavier qui ne doivent pas etre utilisees comme les 
fleches de deplacement ou les touches Suppr ou Insert, par exemple. Dans ce cas, la 
detection du caractere pourrait etre mise en place au debut de la fonction comme l'illustre 
1' exemple de code suivant qui permet de filtrer les touches numeriques du clavier. 

Code 13-8 : exemple de nitre bloquant les touches numeriques du clavier : 

function verifierNom(event) { 
event = window. event| |event; 
// Recuperation du code de la touche 
var codeTouche= event. keyCode; 
if (codeTouche>=48 && codeTouche<=57) 
{ 

// Mettre ici 1 'action si le caractere est un chiffre 
return false; 
} 

// Pour information, le caractere de la touche peut 
// etre recupere avec 1 'instruction suivante : 
var touche = String. f romCharCode(codeTouche) ; 

) 
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Test du systeme 



Ouvrez la page i ndex. html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Pour les tests, nous vous invitons a saisir l'un des deux noms deja presents 
dans la table joueurs (Defrance ou Dupond). Des l'insertion de la premiere lettre dans le 
champ de saisie, un message « joueur inconnu » doit s'afficher dans la zone de message 
situee en dessous du champ de saisie et le bouton JOUER doit devenir grise afin d'indi- 
quer qu'il est bloque. Continuez cependant a saisir le nom, jusqu'a sa derniere lettre. Le 
message doit alors changer et indiquer « joueur identifie » et le bouton JOUER doit de 
nouveau redevenir actif . 

Vous pouvez ensuite appuyer sur le bouton JOUER et utiliser le systeme comme dans les 
ateliers precedents. Le nom du joueur et le montant de son nouveau gain doivent alors 
apparaitre a l'ecran. 

Pour visualiser les donnees renvoyees par le serveur lors de la reponse de chacune des 
requetes generees par un nouveau caractere, nous vous conseillons d'activer Firebug et 
de cliquer sur l'onglet Console. Si nous prenons comme exemple le moment ou vous 
venez de saisir le dernier caractere d'un des deux noms de la base, vous devriez voir en 
bas de la fenetre les deux dernieres requetes avant la validation du nom. Cliquez sur le 
signe + situe devant les noms de ces deux derniers fichiers pour les derouler et cliquez 
ensuite sur leur onglet Response. Vous devriez voir dans cette fenetre la valeur pour 
l'avant derniere requete (le nom du joueur n'etant pas encore identifie, voir repere 5 de la 
figure 13-6) et la valeur 1 pour la derniere s'il s'agit de Defrance (sinon c'est la valeur 2 
pour Dupond puisqu'il s'agit de leur cle primaire, voir repere 2 de la figure 13-6). Vous 
pouvez aussi cliquer sur les onglets Params de ces deux requetes pour constater que dans 
la derniere, le nom complet a ete envoye (Defrance, par exemple) alors que dans l'avant 
derniere, il manquait encore la derniere lettre (Def ranc, par exemple). 
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Atelier 13-2 : insertion dans la base de donnees issues 
d'un formulaire 

Composition du systeme 

Dans ce deuxieme atelier, nous allons adapter le premier moteur Ajax et son script 
serveur afin de pouvoir memoriser les differents gains des joueurs dans une nouvelle 
table de la base. Pour verifier que l'insertion a bien ete effectuee, nous allons egalement 
aj outer un troisieme parametre a la reponse retournee par le serveur afin de permettre 
l'affichage d'un message d'erreur a la place du montant du gain habituel si toutefois un 
probleme survenait. 

Cette structure est composee : 

• d'une page HTML (index, html) dont la structure est identique a celuide 1' atelier 13-1 ; 

• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (f oncti onsMachi ne . j s) qui contient les fonctions specifiques a l'application 
Ajax de la machine a sous dont la structure de base avant modification est identique a 
celle de 1' atelier 13-1 ; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celle de 
1' atelier 13-1, modifiee pour pouvoir gerer la commande d' insertion SQL dans la base 
de donnees ; 

• d'un fichier serveur PHP pour la verification du nom (nomVeri f i cati on . php), identique 
a celui de 1' atelier 13-1 ; 

• d'un fichier PHP de connexion a la base de donnees (connexionMysql .php), identique a 
celui de 1' atelier 13-1 ; 

• d'une feuille de styles (style. ess) identique a celle de l'atelier 13-1 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du systeme est semblable a celui de l'atelier 13-1 que nous venons de 
realiser a ceci pres que dans cet atelier, les gains de chaque jeu sont enregistres dans la 
base de donnees. En cas de probleme avec le serveur de base de donnees, un message 
d'erreur s'affichera alors a l'ecran. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 13-1 (index, html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chapl3/atelierl3-2/. Copiez ensuite les autres 
fichiers de l'atelier 13-1 dans ce nouveau dossier. 

Pour memoriser les montants des gains des differents joueurs nous allons devoir creer 
une seconde table gains dans la base machineasous. Celle-ci est liee a la premiere (joueurs) 
par un champ particulier que nous nommons « cle etrangere » dans le dialecte des bases 
de donnees, mais qui n'est, ni plus ni moins, que la copie de la cle primaire du joueur 
auquel est attribue le gain de l'enregistrement (ceci afin d'assurer la liaison entre l'enre- 
gistrement du gain et celui du joueur concerne). Ainsi, si nous realisons une structure 
minimaliste de cette table, elle peut ne comporter que quatre champs : sa cle primaire 
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(ID : champ obligatoire pour toutes les tables, auto-incremente dans notre cas) ; le 
montant du gain a enregistrer (montant) ; la date et l'heure (date) de l'enregistrement et la 
cle etrangere (joueursID : copie du champ ID de la table joueurs) qui relie l'enregistrement a 
celui d'un joueur particulier de la table joueurs. 

Pour creer cette nouvelle table, nous allons de nouveau utiliser le gestionnaire 
phpMy Admin (cliquez sur l'entree du meme nom dans le manager de Wamp pour ouvrir 
le gestionnaire). Une fois ouvert, nous selectionnons cette fois la base machineasous que 
nous avons cree precedemment dans le menu de gauche. Le nom de la table joueurs et ses 
differents boutons donnant acces aux actions du gestionnaire sur cette table doivent appa- 
raitre a droite. Saisissez le nom gains dans le champ Creer une nouvelle table, et 4 pour le 
nombre de champs puis validez en cliquant sur le bouton Creer. 

Nous nous retrouvons de nouveau avec le meme genre de formulaire que pour la creation 
de la table joueurs (revoir si besoin l'atelier precedent pour plus d' explications sur le role 
de chacun de ces champs). Saisissez les quatre noms et leur eventuelles valeurs associees 
dans les deux premieres colonnes de ce formulaire en vous referant aux informations de 
la figure 13-7. A noter que dans le cas de cette table gai ns, les champs sont de type entier 
(INT) sauf pour la date (qui est de type DATETIME). En effet, les cles etrangere et primaire 
doivent etre de meme type (le champ ID de la table joueurs etant de type INT, il est done 
logique que la cle etrangere en rapport soit, elle aussi, de type INT). De meme, le montant 
correspondant a une valeur entiere comprise entre et 100 (sans decimale), son champ 
devra, lui aussi, etre de type INT. 
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Figure 13-7 

Formulaire de creation de la table gains (partie de gauche) 



Deplacez-vous maintenant dans la partie de droite du formulaire a l'aide du curseur hori- 
zontal. Dans la colonne Extra, selectionnez l'option auto_increment (comme pour la 
precedente table joueurs) pour la cle primaire (premiere ligne) et cochez le bouton radio 
Primaire sur la meme ligne pour indiquer que ID est la cle primaire de la table (voir 
figure 13-8). Validez votre configuration en cliquant sur le bouton Sauvegarder pour creer 
la nouvelle table gains correspondante. 

Passons maintenant a l'editeur Dreamweaver afin de modifier les fichiers pour repondre 
aux nouvelles fonctionnalites de cet atelier. 

Pour lier l'enregistrement du gain avec celui du joueur correspondant, nous allons devoir 
disposer de la cle primaire du joueur. Pour memoire, celle-ci est renvoyee dans la reponse 
du second moteur Ajax, des que le nom du joueur est identifie dans la table joueurs. 
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Nous allons done recuperer cette information pour 1' exporter dans le processus d' inser- 
tion en 1' envoy ant en parametre supplementaire dans la requete du premier moteur Ajax 
(celui qui est declenche par le bouton JOUER). 
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Figure 13-8 

Formulaire de creation de la table gains (partie de droite) 



Commencez par ouvrir le fichier fonctionsMachine. js puis localisez la premiere instruc- 
tion apres le test du statut dans la fonction afficherReponse( ) du deuxieme moteur Ajax. 
Pour le moment, la variable nouveauResultat qui receptionne l'identiflant du joueur (des 
qu'il est reconnu) est declaree en variable locale (avec var) et son utilisation est done 
limitee au bloc de la fonction. Nous allons modifier cela en supprimant le mot-cle var 
afin de rendre la variable globale et ainsi pouvoir en disposer dans le reste du programme. 
La nouvelle instruction apres modification doit etre semblable a la ligne suivante : 

nouveauResultat = objetXHR2. responseText ; 

Nous allons maintenant recuperer cette information dans la fonction jouer( ) pour l'ajou- 
ter dans les parametres d'URL deja presents pour la requete Ajax. Pour cela, nous allons 
modifier l'instruction qui construit la variable parametres arm d'ajouter la variable 
nouveauResultat (desormais disponible dans cette fonction car elle est maintenant 
globale) dans la chaine des parametres d'URL precedee de &ID= pour etre conforme au 
format d'URL comme indique dans l'instruction ci-dessous. 



I var 



parametres = "nom="+ codeContenuC'nom") + "&ID="+ nouveauResultat 
"&anticache="+temps ; 



Ainsi, la requete Ajax du premier moteur envoie desormais l'identifiant de l'enregistre- 
ment du joueur en plus de son nom. Nous n'avons cependant pas termine nos modifications 
cote client car nous desirons aussi afficher un message d'information a la place du message 
habituel indiquant le montant du gain dans le cas ou des problemes de connexion avec la 
base de donnees surviendraient, empechant l'enregistrement du gain. 

Nous reviendrons sur ce fichier JavaScript par la suite. Passons maintenant au fichier 
PHP afin de gerer la requete SQL d' insertion qui doit etre declenchee a la reception de la 
requete Ajax initiee par une action du joueur sur le bouton JOUER. 

Ouvrez pour cela le fichier gainAleatoire.php et commencez par ajouter un script de 
reception HTTP de la variable ID semblable a celui que nous avons deja mis en place 
pour la variable nom. 

Iif(isset($_REQUEST['ID'])) $ID=$_REQUEST['ID'] ; 
else $ID=0; 
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Ajoutez l'instruction d'inclusion du fichier de connexion Mysql apres l'instruction du 
calcul du gain de maniere a disposer de ses informations dans le fichier. 

require_once( 'connexionMysql .php' ) ; 

Selectionnez ensuite la base machineasous (memorisee dans la variable $base) a l'aide de 
l'instruction mysql_select_db(). 

mysql_select_db($base) ; 

Passons maintenant a la creation de la commande SQL qui va permettre d'ajouter le 
montant du gain dans la table gai ns (revoir si besoin les syntaxes SQL dans le chapitre 22 
de la partie 4 de cet ouvrage). 

$commandeSQL="INSERT INTO gains SET montant='".$gain."' , joueursID="'.$ID. ; 

Dans cette commande, nous allons renseigner le montant du gain (calcule aleatoirement 
comme d'habitude) et la cle primaire du joueur auquel ce gain doit etre associe (memo- 
rise dans le champ de la cle etrangere joueursID de la table gains). Cette derniere informa- 
tion est envoyee en parametre dans l'URL de la requete Ajax suite aux modifications que 
nous avons realisees precedemment. Une fois que la commande proprement dite est 
memorisee dans la variable ScommandeSQL, il ne reste plus qu'a la soumettre au serveur a 
l'aide de la fonction mysql_query( ). 

treponseSQL = mysql_query($commandeSQL) ; 

La reponse retournee par le serveur de base de donnees est egale a true (soit 1) si l'inser- 
tion a ete correctement effectuee et a f al se dans le cas contraire. II suffit done ensuite de 
recuperer cette variable pour l'inclure en troisieme parametre dans la reponse retournee 
au navigateur. 

$ result a t=$nom. ' : ' . $ g a i n . ' : ' .$reponseSQL; 

Les modifications de ce fichier PHP sont terminees, vous pouvez l'enregistrer. II doit 
maintenant etre semblable au code 13-9. 



Code 13-9 : gainAleatoire.php, apres modifications : 



header("Content-Type: text/plain ; charset=utf-8" ) ; 

headerC'Cache-Control : no-cache , private"); 

header( "Pragma: no-cache"); 

sleep(2); 

if(isset($_REQUEST['nom'])) $nom=$_REQUEST[ 'nom'] ; 

else $nom="inconnu" ; 

if(isset($_REQUEST['ID'])) $ID=$_REQUEST[ ' ID' ] ; 

else $ID=0; 

$gain = rand(0,100); 

require_once( 'connexionMysql .php" ) ; 

mysql_select_db($base) ; 

$commandeSQL="INSERT INTO gains SET montant='".$gain."' , joueursID='".$ID. ; 

$reponseSQL = mysql_query($commandeSQL) ; 
$ result a t=$nom. ' : ' . $ g a i n . ' : ' .IreponseSQL; 
echo $resultat ; 

Revenons maintenant cote client pour terminer nos modifications. En effet, il nous reste 
a exploiter ce troisieme parametre pour conditionner l'affichage du montant du gain habi- 
tuel si sa valeur est egale a 1 ou afficher un message indiquant un probleme dans le cas 
contraire. 
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La recuperation des valeurs de la reponse serveur s'effectue de la meme maniere que 
dans les ateliers precedents hormis le fait que nous avons maintenant trois valeurs a recu- 
perer au lieu de deux. A noter que la conversion de la chaine du resultat (au format 
nom:gain:indicateur) en un tableau de variables s'effectue aussi avec la methode 
spl i t ( " : " ) , comme dans les ateliers precedents. 

Une fois que l'indicateur de reussite de 1' insertion SQL est accessible par une variable du 
tableau (nouveauResultat[2]), nous allons utiliser une structure de test if ( ) conditionnee 
par l'egalite de cet indicateur avec la valeur 1 (valeur correspondant a une insertion effec- 
tuee sans probleme) pour afficher le resultat du jeu. Dans le cas contraire, un message 
d'erreur est affiche a la place du resultat (voir structure el se dans le code 13-10). 

var nouveauResul tat = objetXHR. responseText.spl it(" : " ) ; 
if(nouveauResultat[2]==l) { 
... } else { 
... } 

A noter que nous avons ajoute juste apres le test une instruction de reinitialisation du 
contenu de l'element info avec la meme structure qu'au chargement initial de la page 
(voir code 13-10) afin que le systeme puisse de nouveau fonctionner normalement suite a 
une erreur SQL. En effet, une telle erreur aurait pour incidence de remplacer tout le 
contenu de l'element info par le message d'erreur et empecherait ainsi un fonctionnement 
normal du systeme une fois le probleme resolu. 

Une fois modifiee, la fonction actual i serPage( ) doit etre semblable au code 13-10. 

Code 13-10 : fonction actual iserPageO, apres modifications : 

function actual iserPage( ) { 
if (objetXHR. readyState == 4) { 
if (objetXHR. status == 200) { 

var nouveauResultat = objetXHR. responseText. spl it(" :") ; 
if(nouveauResultat[2]==l) { 

var elementlnfo = document. getElementByldC'info") ; 

elementInfo.innerHTML='Bravo, M <span id="gagnant"X/span> vous avez gagne 
*»<span id="resultat"X/span>  Euros' ; 
element Info. style. col or="black"; 
// Actual isation du resultat 

remplacerContenu( "resultat" , decodeURI (nouveauResul tat[l] ) ) ; 
// Actual isation du nom 

rempl acerContenu( "gagnant" , decodeURI (nouveauResul tat [0] )) ; 
// Affichage de la zone info 
}else{ 

var elementlnfo = document. getElementByldC'info") ; 
elementlnfo. innerHTML="Probleme technique : gains non enregistres" ; 
el ementlnf o . styl e . col or="red" ; 
} 
document. getElementByldC'info") . style. vis ibil ity=" visible" ; 
document. get Element By Id ("button" ) .disabled= fal se; 
document. get El ementBy Id ("charge") .style. vis ibil ity=" hidden" ; 
} 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 
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Test du systeme 



Ouvrez la page i ndex. html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Comme dans 1' atelier precedent, saisissez un des deux noms enregistres 
dans la table joueurs (Defrance ou Dupond). Lorsque le message «joueur identifie » 
apparait, cliquez sur le bouton JOUER. Le message habituel indiquant le montant du 
gain doit alors s'afficher s'il n'y a pas de probleme de connexion avec le serveur de base 
de donnees et le gain du jeu doit etre ajoute dans la table gains. 

Si vous le desirez, vous pouvez simuler un probleme de connexion en changeant le nom 
de l'utilisateur oucelui de la base dans le fichier connexionMysql .php. Si vous renouvelez 
vos tests, un message d'erreur doit s'afficher a la place du montant du gain. 

Pour visualiser les donnees renvoyees par le serveur lors de la reponse, nous vous 
conseillons d'activer Firebug et de cliquer sur l'onglet Console. Cliquez sur le signe + qui 
precede les deux derniers noms de fichier pour les derouler. Le dernier enregistrement 
(voir repere 3 de la figure 13-9) correspond a l'appel du script serveur gai nAl eatoi re . php 
et on peut voir dans la fenetre Response les trois parametres renvoyes par le serveur (si 
l'insertion dans la base s'est bien passee, le troisieme parametre doit etre egal a 1, voir 
repere 4 de la figure 13-9). L'avant dernier enregistrement, quant a lui, correspond au 
dernier appel du fichier nomVerifi cation. php (voir repere 1 de la figure 13-9). La reponse 
du serveur de cette requete, indiquant que le nom du joueur a ete identifie dans la base, 
doit etre differente de (soit 1 pour Defrance et 2 pour Dupond, voir repere 2 de la 
figure 13-9). 
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Test du systeme d'insertion des gains dans la base 
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Enfin, si vous desirez verifier que les bonnes valeurs de gain ont bien ete attribuees au 
bon joueur, vous devez a nouveau utiliser phpMy Admin pour afficher le contenu de la 
table gains (voir figure 13-10). 
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Atelier 13-3 : recuperation dune liste de donnees 
dans la base de donnees 

Composition du systeme 

Pour illustrer la recuperation d'une liste d'enregistrements par une application Ajax, 
nous vous proposons maintenant de developper un systeme qui affiche automati- 
quement 1'historique des gains d'un joueur dans un tableau HTML des que le nom du 
joueur est identifie. 

Cette structure est composee : 

d'une page HTML (index.html) dont la structure de base avant les modifications est 
semblable a celle de 1' atelier 13-2 ; 

d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 

d'un fichier JS (f oncti onsMachi ne . j s) qui contient les fonctions specifiques a l'application 
Ajax de la machine a sous dont la structure de base avant modification est identique a 
celle de 1' atelier 13-2 ; 

d'un fichier serveur PHP (gainAleatoire.php) identique a celui de l'atelier 13-2 ; 

d'un fichier serveur PHP pour la verification du nom (nomVeri f i cati on . php), identique 
a celui de l'atelier 13-2 ; 

d'un nouveau fichier serveur PHP cree dans cet atelier (gainListe.php) qui renvoie la 
liste des gains du joueur ; 

d'un fichier PHP de connexion a la base de donnees (connexionMysql .php), identique a 
celui de l'atelier 13-2 ; 

d'une feuille de styles (style. ess) identique a celle de l'atelier 13-2 ; 

d'une animation indiquant que le traitement est en cours (chargeur.gif). 



Ateliers de creation d'applications Ajax-PHP 



Partie III 

Fonctionnement du systeme 

Le fonctionnement du systeme sera semblable a celui de 1' atelier 13-2 que nous 
venons de realiser a 1' exception pres que dans cet atelier, un tableau HTML contenant 
l'historique des gains, ainsi que la date et l'heure d'enregistrement, s'affichera en bas 
de l'ecran. 

Pour mettre en oeuvre cette nouvelle fonctionnalite, nous allons creer un troisieme 
moteur Ajax qui va appeler un fichier PHP specifique qui sollicitera a son tour la base de 
donnees avec une requete SQL pour que le navigateur puisse recuperer la liste des enre- 
gistrements desires au format JSON. Une fois les donnees disponibles cote client, nous 
allons utiliser les methodes DOM pour creer a la volee un tableau HTML integrant les 
informations recuperees dans le document JSON. 

Conception du systeme 

Ouvrez la page HTML de 1' atelier 13-2 (i ndex. html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chapl3/atelierl3-3/. Copiez ensuite les autres 
fichiers de 1' atelier 13-2 dans ce nouveau dossier. 

Commencez par ouvrir le fichier i ndex . html afin d' ajouter la structure vide du tableau qui 
receptionnera par la suite les enregistrements des gains et leur date. Pour cela, ajoutez la 
structure suivante en bas de la page en prenant soin de configurer un identifiant nomme 
tableListe dans labalise <tbody> de cette structure. 

Code 13-11 : structure du tableau de l'historique des gains du joueur : 

<table width="400" border="l" al ign="center" cell spacing="0" > 
<tbody id="tableListe"> 
<tr> 
<td>Pas encore de gain</td> 
<td>?</td> 
</tr> 
</tbody> 
</table> 



Balises thead, tbody et tfoot 

Pour plus dinformations sur ces balises, reportez-vous a I'encadre qui leur est consacre dans I'atelier 12-6. 



Profitez que le fichier index.html soit ouvert pour y ajouter une balise <script> en reference 
a la bibliotheque json.js que nous allons utiliser par la suite dans fonctionsMachine.js. 

<script type="text/javascript" src="json. js"X/script> 

Ouvrez ensuite le fichier fonctionsMachine.js. Le declenchement du moteur Ajax que 
nous allons creer etant initie par l'identification du nom du joueur, nous allons ajouter un 
appel a la future fonction du nouveau moteur (demandeGains( )) au debut de la fonction de 
rappel du moteur qui gere actuellement la verification du nom du joueur, soit affiche- 
ReponseO (voir code 13-12). 

Code 13-12 : ajout de l'appel de la fonction demandeGainsO dans la fonction afficher- 
Reponse( ) : 

I function afficherReponse( ) { 
if (objetXHR2.readyState == 4) { 



Applications Ajax-PHP-MySQL 



Chapitre 13 



if (objetXHR2. status == 200) { 
nouveauResultat = objetXHR2. responseText; 
if (nouveauResultat!=0) { 
demandeGainst ) ; 

Pour que le tableau de rhistorique soit actualise apres chaque jeu du joueur, nous devons 
aussi ajouter un appel a cette meme fonction demandeGainsO dans la fonction de rappel 
actual iserPageO du premier moteur (celui qui gere 1'affichage du resultat du jeu a 
l'ecran). Le debut de cette fonction, une fois modifiee, doit etre semblable au code 13-13. 

Code 13-13 : ajout de l'appel de la fonction demandeGainsO dans la fonction actual iser- 
PageO : 

function actual iserPageO ( 
if (objetXHR.readyState == 4) { 
if (objetXHR. status == 200) { 

var nouveauResultat = objetXHR. responseText. spl it(" :") ; 
if (nouveauResultat[2]==l) { 
demandeGainsO ; 

Pour eviter d' avoir a reecrire tout le code du nouveau moteur, nous allons prendre comme 
base de depart les instructions des deux fonctions du second moteur Ajax (copiez l'inte- 
gralite de ces deux fonctions et collez le tout a la fin du fichier). 

Renommez la premiere fonction de ce nouveau moteur en demandeGains de maniere a ce 
que cela corresponde a l'appel deja place dans les fonctions af f i cheReponse( ) et actual i ser- 
PageO (voir code 13-12 et 13-13). 

function demandeGainsO { 

Utilisez ensuite la fonctionnalite Rechercher/Remplacer de Dreamweaver pour modifier 
le nom de l'objet XHR dans les deux fonctions de ce nouveau moteur (mettre objetXHR3 a 
la place de objetXHR2, voir codes 13-14 et 13-17). 

Ann de pouvoir selectionner les gains du joueur, les parametres de la future requete 
doivent contenir son identifiant qui a ete prealablement sauvegarde dans la variable 
nouveauResultat lors de la verification de son nom. II convient done de modifier la 
construction de la variable parametre3 correspondante. 

I var parametres3 = "ID="+ nouveauResultat + 
"&anticache="+temps ; 

Le deuxieme argument de la methode open( ) doit aussi etre actualise afin de cibler cette 
fois le fichier gainListe.php (fichier que nous allons creer par la suite). 

objetXHR3. open ("get" ,"gainl_iste.php?"+parametres3, true) ; 

De meme, le nom de la fonction de rappel de ce troisieme moteur doit aussi etre change. 
Definissons par exemple af f 1 cheGa ins comme nom de cette future fonction de rappel. 

objetXHR3.onreadystatechange = afficheGains; 

La methode send( ) reste, quant a elle, inchangee. Une fois que toutes les modifications 
sont effectuees, la fonction demandeGainsO doit etre semblable au code 13-14. 



Ateliers de creation d'applications Ajax-PHP 



Partie III 



Code 13-14 : 

function demandeGainsO { 

objetXHR3 = creationXHR( ) ; 

var temps = new Date( ) .getTime( ) ; 

var parametres3 = "ID="+ nouveauResultat + 
"&anticache="+temps ; 

objetXHR3.open( "get" ,"gainListe.php?"+parametres3, true) ; 

objetXHR3.onreadystatechange = afficheGains; 

objetXHR3.send(null); 
} 

Avant de developper la fonction de rappel af f i cheGai ns qui va de pair avec cette premiere 
fonction, nous allons creer le fichier PHP gainListe.php qui va receptionner les parame- 
tres dans la requete Ajax et qui va renvoyer la reponse au format JSON apres avoir inter- 
roge la base de donnees. Nous reviendrons ensuite sur le fichier client pour terminer nos 
modifications. 

Ouvrez le fichier nomVerification.php qui nous servira de base pour elaborer le nouveau 
fichier PHP. Enregistrez-le sous son nouveau nom, soit gainListe.php. 

Commencez par modifier 1' instruction de recuperation HTTP de la variable nom en la 
remplacant par ID (ID etant le parametre envoy e par le nouveau moteur Ajax que nous 
venons de mettre en place). 

Iif(isset($_REQUEST['ID'])) $ I D=$_REQUEST[ ' ID ' ] ; 
else $ID=0; 

Changez ensuite la clause WHERE de la requete SQL afin de l'adapter a ce nouveau parame- 
tre ID (pour selectionner l'enregistrement par rapport a cette cle etrangere). De meme, 
modifiez le nom de la table dans laquelle est realisee la recherche en remplacant la table 
actuelle par gains. 

$requeteSQL= "SELECT montant. date FROM gains WHERE joueursID='".$ID."' ORDER BY ID DESC "; 

Cette requete retourne ainsi les deux colonnes montant et date pour chaque enregistre- 
ment de la table gains dont la cle etrangere joueursID est egale a la cle primaire du joueur 
qui a ete prealablement identifie par le systeme de verification du nom cote client. 

L'objectif du programme qui suit est de convertir au format JSON la serie d'enregistre- 
ments retournee par le serveur de base de donnees a la reception de la requete SQL. 
Apres la conversion, nous devrions avoir un document JSON semblable a l'exemple 
suivant (voir code 13-15) : 

Code 13-15 : exemple de reponse JSON generee par le programme (correspondant a 
3 enregistrements) : 



{ "gains" : [ 








{ "montant" 


"37" 


"date" 


"2007-09-26 02:01:17" } 


,{ "montant" 


"70" 


"date" 


"2007-09-26 01:59:52" } 


,{ "montant" 


"27" 


"date" 


"2007-09-26 01:59:43" } 


] } 









Pour faciliter la comprehension de ce programme (voir code 13-16), nous avons mis en 
gras les informations qui doivent etre integrees dans le document JSON renvoye au navi- 
gateur. 
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Code 13-16 : programme de conversion des jeux d'enregistrements issus de la base de 
donnees en un document JSON correspondant : 

$debut = true; 

$nbColonnes=mysql_num_fields($reponseSQL) ; 
echo "{\"gains\":[" ; 
if (mysql_num_rows($reponseSQL) ) { 
while ($ligne = mysql_fetch_array($reponseSQL) ) { 
if ($debut){ 
echo "{"; 
$debut = false; 
) else { 

echo ",{"; 
( 
for($j=0;$j<$nbColonnes;$j++){ 
$colonne=mysql_field_name($reponseSQL,$j ) ; 

echo "\"" .$colonne. "\":\"" . utf8_encode($ligne[$colonne]). "\"" ; 
if ($j != $nbColonnes-l) echo ","; 
} // Fin de la boucle for 
echo "}"; 

} // Fin de la boucle while 
} // Fin de la boucle if 
echo "]}"; 

Dans le document JSON, les couples nom colonne/valeur des donnees de la base sont 
representes par des series au format "nomColonne'Vvaleur". Chaque enregistrement est 
compose de plusieurs series separees par une virgule. L'exemple du code 13-15, presente 
trois enregistrements (representes sur trois lignes differentes) chacun compose de deux 
series. 

La premiere instruction du debut du programme permet d'initialiser une variable $debut 
qui va etre utilisee ulterieurement pour detecter s'il s'agit du premier enregistrement ou 
non. L'affichage de la virgule qui precede 1' accolade du debut de 1' enregistrement etant 
par la suite conditionne par le test if ($debut), la virgule s'affiche ainsi au debut de toutes 
les series sauf de la premiere. 

La seconde instruction permet de memoriser dans la variable SnbColonnes le nombre de 
colonnes de chaque enregistrement retourne par le serveur de base de donnees. Cette 
variable est ensuite exploitee dans la boucle for( ) qui affiche autant de series au format 
"nomColonne'Vvaleur" qu'il y a de colonne (dans notre exemple, nous n'avons que deux 
colonnes : montant et date, voir l'exemple ci-dessous). 



"montant": "37". "date": "2007-09-26 02:01:17" 

Afin de ne pas avoir de virgule apres la derniere serie d'un meme enregistrement, une 
structure de test if ( ) integree a la boucle conditionne son affichage. 

if ($j != $nbColonnes-l) echo "."; 

Le debut du document est toujours identique (meme s'il n'y aucun enregistrement, dans 
ce cas le contenu des [ ] est vide). 

echo "{\"gains\":[" ; 

La boucle while( ) permet d'afficher autant de lignes qu'il y a d'enregistrements dans la 
reponse de la base de donnees. Ainsi, dans l'exemple du code 13-15, il y a trois enregis- 
trements, la boucle while( ) parcourt trois fois son corps de boucle et affiche trois lignes. 
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A noter que le corps de boucle whi 1 e( ) contient aussi la boucle f or( ) qui permet de creer 
autant de series qu'il y a de colonnes et cela pour chaque ligne d'enregistrement. 

I while ($ligne = mysql_fetch_array($reponseSQD) { 
} // Fin de la boucle while 

Enfin, le document JSON est cloture par les deux caracteres ] } grace a l'instruction ci- 
dessous : 

echo "]}"; 

Une fois toutes les instructions modifiees, enregistrez votre fichier PHP et revenez au 
fichier fonctionsMachine. js pour creer la fonction de rappel afficheGains qui va traiter le 
document JSON renvoye par le programme PHP que nous venons de decrire. 

Apres les tests if() communs aux autres fonctions de rappel, nous allons recuperer la 
chaine de caracteres correspondant au document JSON dans la variable listeJSON au 
moyen de l'instruction ci-dessous. 

listeJSON = objetXHR3.responseText; 

La conversion de cette chaine en objet JavaScript est realisee a l'aide de la methode 
parseJSONO disponible grace a la bibliotheque json.js installee prealablement (revoir le 
debut de cette procedure pour l'ajout de la balise dans le fichier index.html faisant refe- 
rence a la bibliotheque json.js). 

objetJS0N3=listeJS0N. parseJSONO; 

Avant d'extraire les differents contenus de cet objet pour construire le tableau HTML, 
nous allons creer une variable tabl el_i ste qui reference la balise <tbody> dont ridentifiant 
est "tabl eLi ste". Cette balise correspond au corps du tableau dans lequel nous allons 
integrer l'historique des gains par la suite. 

var table Li ste=document.getElementBy Id ("tabl eLi ste"); 

Afin de pouvoir reinitialiser le contenu de cette table a chaque actualisation des donnees, 
nous allons utiliser la fonction supprimerContenuO deja creee et qui se trouve dans la 
bibliotheque fonctionsAjax.js. 

supprimerContenu(tableListe); 

La boucle for() suivante permet de parcourir tous les enregistrements contenus dans 
1' objet JavaScript et d'en extraire le montant et la date a chaque tour de boucle. Une fois 
les donnees d'un enregistrement recuperees, nous allons utiliser une fonction (detaillee 
ci-apres) pour creer une nouvelle ligne dans le tableau HTML afin d'y integrer les 
donnees correspondantes. 

f or( i =0 ; i <ob j et JS0N3 . gai ns . 1 ength ; i++) { 

var montant=objetJS0N3.gains[i]. montant; 

var date=objetJS0N3.gains[i] .date; 

nouvel 1 eLi gne( tabl eLi ste, date, montant) ; 
} 

Une fois ces modifications effectuees, la fonction de rappel complete devrait alors etre 
semblable au code 13-17. 

Code 13-17 : fonction afficheGainsO : 

function afficheGainsO { 
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if (objetXHR3.readyState == 4) { 
if (objetXHR3. status == 200) { 
listeJSON = objetXHR3.responseText; 
objetJS0N3=liste0S0N.parseJS0N(); 
var tableListe=document.getElementById("tableListe") ; 
supprimerContenu(tableListe) ; 
for(i=0;i<objetJS0N3.gains.length;i++){ 

var montant=objetJS0N3.gains[i] .montant; 

var date=objet0S0N3.gains[i].date; 

nouvel leLignettableListe. date, montant) : 
} 



) 



La fonction de creation des lignes du tableau HTML exploite les methodes du DOM. 
Trois arguments lui sont passes, a savoir le nom du tableau auquel doit etre rattachee la 
nouvelle ligne et les deux textes qui viennent s'inserer dans les deux cellules de la ligne. 

function nouvelleLigne(tab,textl,text2) { 

La premiere instruction de la fonction permet de creer un nouvel element tr. 

var nouveauTR=document.createElement( 'tr' ); 

Nous allons ensuite avoir deux ensembles de trois instructions qui permettent de creer les 
elements et le contenu des cellules de la ligne. 

var nouveauTDl=document.createElement( 'td'); 

var nouveauTXTl=document.createTextNode(textl); 

nouveauTDl.appendChild(nouveauTXTl) ; 
// 

var nouveauTD2=document.createElement( 'td' ); 
var nouveauTXT2=document.createTextNode(text2); 
nouveauTD2.appendChild(nouveauTXT2) ; 

Une fois ces deux cellules generees (nouveauTDl et nouveauTD2), les deux instructions 
suivantes permettent de les rattacher a la ligne creee au debut de la fonction (element 

nouveauTR). 

I nouveauTR. appendChi ld(nouveauTDl); 
nouveauTR. appendChild(nouveauTD2); 

II suffit ensuite de rattacher l'element nouveauTR au corps du tableau (soit l'element tbody 
passe en parametre dans le premier argument de la fonction : tab) qui va recevoir l'histo- 
rique des gains a l'aide de l'instruction suivante : 

tab. appendChi Id (nouveauTR) ; 

Une fois terminee, la fonction doit etre semblable au code 13-18. 

Code 13-18 : fonction nouvelleLigneO : 

function nouvel lel_igne(tab,textl.text2) { 

var nouveauTR=document.createElement( 'tr'); 

// 

var nouveauTDl=document.createElement( 'td' ) ; 
var nouveauTXTl=document.createTextNode(textl) ; 
nouveauTDl. appendChi ld(nouveauTXTl) ; 
var nouveauTD2=document. create El ement( 'td' ) ; 
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var nouveauTXT2=document .createTextNode(text2) ; 

nouveauTD2.appendChild(nouveauTXT2) ; 

// 

nouveauTR.appendChild(nouveauTDl) ; 

nouveauTR.appendChild(nouveauTD2) ; 

// 



tab.appendChild(nouveauTR); 
} 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 



Test du systeme 



Ouvrez la page i ndex. html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Comme dans 1' atelier precedent, saisissez un des deux noms enregistres 
dans la table (Defrance ou Dupond). Des que le joueur est identifie par le systeme de 
verification du nom (le message « joueur identifie » doit s'afficher) la requete Ajax du 
nouveau moteur que nous venons de mettre en place dans cet atelier doit etre envoyee au 
serveur et les donnees recuperees dans la reponse JSON doivent s'afficher dans le tableau 
HTML situe en bas de l'ecran (voir figure 13-1 1). 

Si vous cliquez maintenant sur le bouton JOUER, la requete du premier moteur Ajax est 
envoyee comme d' habitude au serveur et le nouveau gain est enregistre dans la base de 
donnees, de meme la reponse de cette requete retourne les informations du resultat qui 
sont affichees dans la page grace au script de la fonction de rappel de ce premier moteur. 
Cependant, comme nous avons aussi ajoute a cette fonction de rappel un appel a notre 
nouveau moteur Ajax (affichage de l'historique), le resultat affiche dans le tableau 
HTML est actualise et une nouvelle ligne contenant le dernier gain du joueur devrait etre 
ajoute a l'historique. 
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Figure 13-11 

Test du systeme d' affichage de l'historique des gains du joueur 
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Atelier 13-4 : double menu deroulant dynamique 
Composition du systeme 

Un double menu deroulant dynamique se caracterise par le fait que les options du 
second menu sont creees dynamiquement suite au choix de l'utilisateur dans le 
premier menu. On peut ainsi creer un systeme de selection des codes postaux dans le premier 
menu qui declenche l'insertion des differentes villes ayant le meme code postal dans 
le second menu. Une autre utilisation courante du double menu dynamique consiste a 
faciliter le choix de la couleur d'un article dans un site marchand en affichant dans le 
second menu les differentes couleurs disponibles pour 1' article selectionne dans le premier 
menu. 

Les applications de ce type de systeme sont nombreuses et variees, aussi nous vous 
proposons dans cet atelier d'illustrer sa mise en oeuvre en l'appliquant a notre machine a 
sous en ligne dans laquelle nous allons aider le joueur a selectionner son identite. Pour 
cela, le premier menu affichera une liste de tous les noms disponibles dans la table 
joueurs. Une fois que l'utilisateur aura fait son choix dans cette premiere liste, une appli- 
cation Ajax interrogera la base de donnees pour recuperer tous les prenoms associes au 
nom selectionne afin de les inserer dans le second menu du systeme. 

Cette structure est composee : 

• d'une page PHP (i ndex . php) dont la structure de base avant modification est semblable 
a celle de la page index.html de l'atelier 13-3 ; 

• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (fonctionsMachine. js) qui contient les fonctions specifiques a l'appli- 
cation Ajax de la machine a sous dont la structure de base avant modification est 
identique a celle de l'atelier 13-3 ; 

• d'un fichier serveur PHP (gainAleatoire. php) identique a celui de l'atelier 13-3 ; 

• d'un fichier serveur PHP (gai nLi ste . php) identique a celui de l'atelier 13-3 ; 

• d'un nouveau fichier serveur PHP (prenomsListe.php) ayant comme base de depart le 
fichier gainListe.php de l'atelier 13-3 ; 

• d'un fichier PHP de connexion a la base de donnees (connexionMysql .php) identique a 
celui de l'atelier 13-3 ; 

• d'une feuille de styles (style. ess) identique a celle de l'atelier 13-3 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

L' application de cet atelier differe du precedent par son systeme d' identification du 
joueur. En effet, ce dernier n'aura plus a saisir son nom comme dans l'atelier precedent, 
mais devra selectionner successivement son nom puis son prenom dans un double menu 
deroulant dynamique. Les autres fonctionnalites (hormis le systeme de verification du 
nom devenu inutile) seront conservees et fonctionneront de la meme maniere que dans 
l'atelier precedent. 
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Conception du systeme 

Avant meme de commencer a modifier le code des fichiers de ce nouvel atelier, nous 
devons d'abord ajouter de nouveaux utilisateurs de la meme famille que les deux joueurs 
deja presents (Defrance et Dupond) afin de disposer d'une base de donnees test compor- 
tant plusieurs joueurs ayant le meme nom. Dans notre demonstration nous allons utiliser 
la liste des joueurs de la figure 13-12. Nous vous conseillons de saisir les memes infor- 
mations si vous desirez pouvoir comparer vos propres resultats avec ceux des figures de 
ce chapitre. 

Pour ajouter ces nouveaux joueurs, vous allez utiliser le gestionnaire de la base de donnees 
phpMyAdmin (accessible depuis le manager de Wamp 5). Des l'ouverture du gestion- 
naire, selectionner la base machineasous dans le menu de gauche puis cliquez sur le 
bouton Afficher sur la ligne de la table joueurs (premier bouton de la ligne). Un tableau 
contenant les enregistrements actuels doit alors apparaitre. Pour ajouter de nouveaux 
joueurs, cliquez sur l'onglet Inserer en haut de la page. Un formulaire vous permet alors 
de saisir deux nouveaux joueurs. Renouvelez cette operation pour obtenir la meme table 
que celle de nos tests (voir figure 13-12). Une fois ces ajouts effectues, vous pouvez 
fermer le gestionnaire pour passer aux modifications du code. 




Figure 13-12 

Liste des noms et prenoms de la table joueurs utilisee pour les tests de cet atelier 



Ouvrez maintenant la page HTML de l'atelier 13-3 (1 ndex . html ) et sauvegardez-la sous le 
nom index. php dans un nouveau repertoire nomme /chapl3/atelierl3-4/ (attention de ne 
pas oublier l'extension .php pour ce nouveau fichier). 

Dans cet atelier, la page principale de 1' application doit etre une page .php car nous allons 
y integrer un script PHP pour generer le premier menu deroulant en recuperant dans la 
base les differents noms de famille des joueurs. Ainsi si, par la suite, un autre joueur est 
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ajoute dans la base de donnees, il apparaitra automatiquement dans ce premier menu lors 
de la prochaine ouverture de 1' application. 

Affichez la page en mode Creation et remplacez le champ de saisie du nom par deux 
menus deroulants en utilisant le bouton de l'onglet Formulaire de la barre Insertion 
correspondante (bouton Liste/Menu). Nommez ensuite le premier menu nom et le second 
prenom en utilisant le panneau Proprietes (selectionnez au prealable le menu a configurer 
dans la fenetre Document). 

En guise d'exemple, nous allons commencer par creer le premier menu en statique (le 
nombre d'options du menu ne sera pas actualise automatiquement dans le cas de l'ajout 
d'une nouvelle famille). Pour configurer manuellement les 3 options du premier menu 
(Selectionner, Defrance et Dupond) selectionnez le menu puis cliquez sur le bouton 
Valeurs de la liste dans le panneau Proprietes. Ajoutez ensuite une option par liste selon 
les etiquettes et les valeurs du menu desirees. 

Si nous passons maintenant en mode Code, les balises correspondantes au premier menu 
doivent etre semblables a celles du code 13-19 ci-dessous. 

Code 13-19 : code d'un premier menu statique : 

<select name='nom' id='nom' > 

<option val ue="">Selectionner votre nom</option> 

<option val ue='Def rance'> Defrance </option> 

<option val ue='Dupond'> Dupond </option> 
</select> 

Passons maintenant a la transformation de ce premier menu pour le rendre dynamique. 
Pour cela, nous allons utiliser un script PHP qui va interroger la base de donnees pour en 
extraire la liste des differents noms de famille des joueurs. Cette liste est ensuite utilisee 
pour creer dynamiquement autant de balises <option> que nous avons d'enregistrements 
retournes par le serveur de base de donnees. Les instructions utilisees pour realiser ce 
menu dynamique sont semblables a celles du code 13-20. L' ensemble de ces instructions 
doit se substituer aux balises du code 13-19 qui permettaient de creer le meme menu 
mais en statique dans la page index. php. 

Code 13-20 : script PHP de creation dynamique du premier menu (celui des noms) : 

<?php 

require_once( 'connexionMysql .php' ) ; 

mysql_select_db($base) ; 

$requeteSQL="SELECT DISTINCT nom FROM joueurs ORDER BY nom"; 

SreponseSQL = mysql_query($requeteSQL) ; 

echo "<select name='nom' id='nom' >"; 

echo "<option value=">Selectionner votre nom</option>" ; 

while (Sdonnees = mysql_fetch_array($reponseSQL) ) { 

echo "<option value='".$donnees['nom'].'"> ".$donnees['nom']." </option>"; 
} 

echo "</select>"; 
?> 

Les deux premieres instructions du code 13-20 permettent d'etablir une connexion a la 
base de donnees en incluant dans la page le fichier connexionMysql .php (dans lequel se 
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trouvent les parametres et la fonction de connexion) et d'en selectionner la base de 
donnees machineasous. 

Irequire_once( 'connexionMysql . php' ) ; 
mysql_select_db($base) ; 

La troisieme instruction contient la requete SQL destinee a recuperer les differents noms 
de famille de la table joueurs classes par ordre alphabetique. La clause DISTINCT permet 
d'eliminer les noms identiques dans la liste. Une fois definie, la requete est ensuite 
soumise au serveur de base de donnees a l'aide de la fonction mysql_query( ). 

I$requeteSQL="SELECT DISTINCT nom FROM joueurs ORDER BY nom" ; 
SreponseSQL = mysql_query($requeteSQL) ; 

Les deux lignes suivantes (voir ci-dessous) permettent de generer en PHP les balises du 
debut du menu qui ne sont pas integrees dans la boucle whi 1 e( ). 

I echo "<select name='nom' id='nom' >"; 
echo "<option value=">Selectionner votre nom</option>" ; 

La boucle whi 1 e( ) qui genere les differentes balises <opti on> est un peu particuliere car la 
condition de boucle contient une instruction mysql_fetch_array() qui transfere a chaque 
tour de boucle un enregistrement du resultat dans un tableau nomme $donnees. Ainsi 
nous pouvons ensuite facilement recuperer le nom du joueur a l'interieur du corps de 
boucle en precisant le nom de sa colonne (soit nom) dans la cle du tableau (exemple : 
$donnees['nom']). Lorsqu'il n'y a plus d'enregistrements dans le resultat pointe par 
SreponseSQL, l'instruction incluse dans la condition de boucle renvoie alors la valeur f al se 
et entraine la sortie de la boucle. 

while (Sdonnees = mysql_fetch_array($reponseSQL) ) { 

echo "<option value='".$donnees['nom'] .'"> ".$donnees['nom']." </option>"; 
} 

La derniere instruction de ce script permet de generer la balise fermante du menu derou- 
lant afin que celui-ci soit conforme aux specifications du W3C. 

echo "</select>"; 

Les modifications de cette page sont terminees, vous pouvez a present l'enregistrer. Le 
script du premier menu dynamique etant deja operationnel, nous vous suggerons de tester 
son fonctionnement des maintenant (en utilisant la touche F12 dans Dreamweaver) afin 
de vous assurer que les differentes options du menu correspondent bien aux noms de 
famille des joueurs (Defrance et Dupond, voir figure 13-13). 

Figure 13-13 
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Ouvrez maintenant le fichier fonctionsMachine.js afin de creer le nouveau moteur Ajax 
pour cette nouvelle fonctionnalite. Pour commencer, nous allons ajouter les deux 
gestionnaires d'evenements lies aux menus deroulants nom et prenom a la fin de la fonction 
testerNavi gateurt ) (pour memoire, cette fonction est appelee des que la page est comple- 
tement chargee) afin d'etre sur que les gestionnaires ne soient pas appliques aux elements 
avant leur chargement dans la page. 
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Le premier gestionnaire doit permettre d'appeler la fonction recupPrenomO lorsque le 
joueur a selectionne une entree du menu nom (gestionnaire onchange). L'appel de cette 
fonction devra etre accompagne en parametre de la valeur selectionnee dans le menu. 
Pour cette raison, nous ne nous contentons pas d'indiquer le nom de la fonction concer- 
ned mais nous allons utiliser la structure d'une fonction anonyme dans laquelle est inclus 
le nom de la fonction visee (recupPrenomsO) et son argument (this. value, voir code ci- 
dessous). 

document. get Element By Id ("nom") .onchange=function() {recupPrenoms( this. value) ;} 



Ancienne declaration de gestionnaire d'evenement 

A titre de comparaison, le gestionnaire ci-dessus, declare directement dans le code JavaScript, est equi- 
valent a celui que nous pourrions realiser si nous I'avions insere dans la page HTML avec la syntaxe ci- 
dessous. Cette ancienne methode est desormais deconseillee car elle ne permet pas la separation 
complete des scripts et de la structure de la page HTML. 

<select name='nom' id='nom' onchange="recupPrenoms(this. value)" > 



Le second gestionnaire permet de controler le menu prenom lorsqu'il est selectionne a son 
tour (gestionnaire onchange). Cette fois, comme aucun parametre n'est necessaire, nous 
lui attribuons simplement le nom de la fonction qui doit etre declenchee lorsque la selec- 
tion du menu est effectuee (soit demandeGains). 

document. get Element By Id ("prenom") .onchange=demandeGains; 

Une fois modifiee, la fin de la fonction testerNavigateurO doit etre semblable au 
code 13-21. 

Code 13-21 : ajout des gestionnaires d'evenements a la fin de la fonction testerNaviga- 
teur( ) : 

function testerNavigateurO { 
objetXHR = creationXHRO; 
if(objetXHR==null) { 



document .get El ementById( "button" ) .oncl ick=jouer; 

document. getElementBy Id ( "nom" ).onchange=functi on ( ) {recupPrenoms( this. value) ;} 

document. getElementBy Id ("prenom") .onchange=demandeGains; 

} 

Nous allons maintenant passer a la creation du nouveau moteur Ajax qui a pour fonction 
d'envoyer une requete avec comme parametre le nom du joueur selectionne dans le 
premier menu et de recuperer la liste des prenoms correspondants pour les associer au 
second menu deroulant. 

Pour creer ce quatrieme moteur, nous allons proceder de la meme maniere que pour les 
trois derniers c'est-a-dire copier la structure des deux fonctions d'un precedent moteur 
pour ensuite les modifier. Une fois les deux fonctions copiees, commencez la person- 
nalisation de la premiere en la renommant recupPrenoms( ). Comme cette fonction doit 
recuperer la valeur du nom du joueur selectionne dans le menu, nous allons aj outer un 
argument nomme nom entre les parentheses de la fonction. 



function recupPrenoms(nom) 
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La premiere instruction permet de reinitialiser le second menu (celui des prenoms) au 
debut de chaque appel de la fonction. 

document. getElementByldt "prenom") .options. length = 1; 

La seconde instruction teste si l'utilisateur a bien selectionne un nom de joueur et non la 
premiere option du menu invitant a selectionner une option (voir ci-dessous). 

<option value="">Selectionner votre nom</option> 

Si l'utilisateur a selectionne cette premiere option, la valeur du nom recupere etant vide, 
le test execute alors un return qui interrompt le traitement en sortant de la fonction. 

if (nom == "") return null ; 

Dans le cas d'une selection normale d'un nom de joueur du menu, le traitement se poursuit 
et l'objet XHR est alors cree. 

objetXHR4 = creationXHRt ) ; 

II faut ensuite preparer le parametre qui va etre envoy e au format d'URL a la suite du 
nom du fichier serveur vise. Dans cette application, nous devons envoyer le nom du 
joueur selectionne afin d'effectuer une recherche selective des enregistrements qui ont 
cette valeur dans leur champ nom. 

var parametres = "nom="+ nom + "&anticache="+temps ; 

Une fois configuree, la variable parametres est ensuite ajoutee au nom du fichier 
prenomListe.php dans le second argument de la methode open( ). 

objetXHR4. open ("get" , "prenoms Li ste.php?"+paramet res, true) ; 

La propriete onreadystatechangede l'objet XHR doit ensuite etre configuree avec le nom 
de la fonction de rappel qui doit assurer la recuperation de la reponse asynchrone du 
serveur (soit creationMenu2). 

| objetXHR4.onreadystatechange = creationMenu2; 

Enfin, la derniere instruction envoie la requete au serveur selon les parametrages prece- 
dents. 

objetXHR4.send(null); 

Une fois modifiee, la fonction recupPrenoms( ) doit etre semblable au code 13-22 : 

Code 13-22 : fonction recupPrenomsO : 

function recupPrenoms(nom) { 

document. getElementByldt "prenom") .options .length = 1; 

if (nom == "") return null ; 

objetXHR4 = creationXHRt ) ; 

var temps = new Datet ) .getTimet ) ; 

var parametres = "nom="+ nom + 

"&anticache="+temps ; 

objetXHR4. open ("get" ."prenoms Li ste.php?"+paramet res, true) ; 

objetXHR4.onreadystatechange = creationMenu2; 

objetXHR4.send(null); 
} 

Nous allons maintenant passer a la fonction PHP qui va receptionner et traiter cette 
requete. Nous reviendrons ensuite sur le fichier fonctionsMachine.js pour creer la fonc- 
tion de rappel creationMenu2(). 
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Ouvrez le fichier gainsListe.phpque nous allons utiliser comme base pour elaborer notre 
nouveau fichier PHP. Enregistrez-le sous le nom prenomsListe.php dans le meme reper- 
toire. 

L'objectif de ce fichier serveur est de receptionner le nom du joueur selectionne dans le 
premier menu, puis de configurer et envoyer une requete SQL au serveur de base de 
donnees pour recuperer la liste des prenoms des enregistrements dont le nom est identique a 
celui du joueur. 

Une fois la liste des prenoms disponibles dans le fichier PHP, deux alternatives sont envi- 
sageables pour creer le second menu deroulant avec les prenoms des personnes ayant 
pour nom celui selectionne dans le premier menu. 

Creez le code HTML du menu deroulant en PHP en y integrant dynamiquement les 
valeurs et etiquettes des prenoms pour chaque option puis renvoyez ce fragment de code 
HTML au navigateur en utilisant la technique que nous avons deja utilisee dans un atelier 
precedent (atelier 12-1 : transfert d'une reponse en HTML). Cote client, le fragment 
HTML est recupere et integre en lieu et place du second menu deroulant precedent. 

Construisez un document JSON (nous pourrions le faire aussi de la meme maniere avec 
un document XML) contenant la liste des differents prenoms et envoyez-le au navigateur 
en utilisant la technique vue dans l'atelier precedent (atelier 13-3 : recuperation d'une 
liste de donnees dans la base). Cote client, le document JSON est recupere et converti en 
objet JavaScript avant d'etre traite pour creer un arbre DOM correspondant qui rempla- 
cera le second menu existant. 

Dans le cadre de cet atelier, nous allons utiliser la seconde technique. Cependant, nous 
devons avant cela commencer par creer une requete SQL afin de recuperer la liste des 
prenoms dans la table joueurs en fonction du nom envoy e en parametre. 

I$commandeSQL="SELECT prenom FROM joueurs WHERE nom='".$nom. ; 
SreponseSQL = mysql_query($commandeSQL) ; 

Une fois le jeu d' enregistrements contenant cette liste des prenoms (SreponseSQL) dispo- 
nible dans le fichier PHP, nous pouvons appliquer le meme programme de creation d'un 
document JSON que dans l'atelier precedent (revoir si besoin les commentaires sur ses 
differentes instructions) a la difference pres que le nom de 1' objet racine est cette fois 
listePrenoms (et non gains comme dans le fichier precedent). 

Le fichier serveur une fois modifie doit etre semblable a celui du code 13-23. 

Code 13-23 : fichier prenomsListe.php : 

header( "Content-Type: text/plain ; charset=utf-8" ) ; 
header( "Cache-Control : no-cache , private"); 
header( "Pragma : no-cache"); 

if(isset($_REQUEST['nom'])) $nom=$_REQUEST['nom']; 
else $nom="inconnu" ; 
require_once( 'connexionMysql . php ' ) ; 
mysql_select_db($base) ; 

$commandeSQL="SELECT prenom FROM joueurs WHERE nom='".$nom. ; 

SreponseSQL = mysql_query($commandeSQL) ; 

$debut = true; 

$nbColonnes=mysql_num_fi elds (SreponseSQL) ; 
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echo "{\"1 istePrenomsV : [" ; 

if (mysql_num_rows($reponseSQL)){ 
while ($ligne = mysql_fetch_array($reponseSQL) ) { 
if ($debut){ 
echo "{"; 
$debut = false; 
} else { 

echo ",{"; 
} 
for($j=0;$j<$nbColonnes;$j++){ 

$colonne=mysql_field_name($reponseSQL,$j ) ; 

echo "\"" .$colonne. "\" :\"" . utf8_encode($l igne[$colonne]) . "\"" ; 
if ($j != $nbColonnes-l) echo ","; 
} // Fin de la boucle for 
echo "}"; 

} // Fin de la boucle while 
} // Fin de la boucle if 
echo "]}"; 

Enregistrez le fichier PHP et revenez maintenant au fichier fonctionsMachine.js pour 
creer la fonction de rappel qui va receptionner et traiter le document JSON. 

La reception du document JSON et la conversion en un objet JavaScript est identique a 
1' atelier precedent. 

Ivar nouveauResultat = objetXHR4.responseText; 
var objetJSON=nouveauResultat.parseJSON( ); 

Une fois que les donnees sont disponibles dans l'objet JSON, nous allons les recuperer 
en utilisant une boucle for( ) qui va parcourir les differents elements places dans la liste 
1 1 stePrenom (chacun de ces elements correspond a un enregistrement de la requete SQL). 

I for (i=0; KobjetJSON.listePrenoms. length; i++) 

A chaque tour de boucle (il y a autant d' iterations qu'il y a de prenoms a integrer dans le 
menu deroulant), nous allons construire un element option avec son contenu et son attribut 
val ue a l'aide des methodes DOM. 

Ivar elementOption = document. createElement( 'option'); 
var prenom= objetJSON.listePrenoms[i] .prenom; 
var texteOption = document. createTextNode(prenom) ; 
elementOption.setAttribute( 'value' , prenom) ; 
elementOption.appendChild(texteOption) ; 

Pour illustrer ce que font ces instructions, si la variable prenom (recuperee dans l'objet 
JSON pour le tour de boucle considere) est egale a CI ai re, la balise suivante devrait alors 
etre creee au terme de ce tour de boucle. 

<option val ue='Cl aire' > Claire </option> 

Une fois construit, l'element opti on est ensuite rattache a son element pere (soit la balise 
<select id="prenom">) afin de construire un menu deroulant avec autant d'options que de 
prenoms correspondant au nom du joueur. 



document. get Element By Id ("prenom") .appendChild(elementOption); 
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Une fois modifiee, la fonction creationMenu2( ) devrait etre semblable au code 13-24. 

Code 13-24 : fonction creationMenu2() : 

function creationMenu2(){ 
if (objetXHR4.readyState == 4) { 
if (objetXHR4. status == 200) { 
var nouveauResul tat = objetXHR4. responseText; 
var objetJSON=nouveauResultat.parseJSON( ) ; 
for (i=0; i<objetJSON.l istePrenoms. length; i++) 
{ 
var elementOption = document. createElement( "option' ); 
var prenom= objetJSON.listePrenoms[i].prenom; 
var texteOption = document. createTextNode(prenom) ; 
elementOption.setAttribute( 'value' , prenom) ; 
el ementOpti on . appendChi 1 d ( texteOpti on ) ; 

document. get Element By Id ( "prenom") .appendChi ld(el ementOpti on) ; 
) // Fin de la boucle for 
} // Fin de la boucle if status 
} // Fin de la boucle if readyState 
} // Fin de la fonction 

La nouvelle application de cet atelier devrait theoriquement etre opera tionnelle. Nean- 
moins, si le systeme d'identification du joueur est desormais base sur ce double menu 
deroulant dynamique, le moteur Ajax verifiant l'identite du joueur que nous avions deve- 
loppe lorsqu'il s'agissait d'une identification par la saisie du nom dans un simple champ, 
n'a plus de raison d'etre et doit etre supprime du fichier fonctionsMachine. js. 

Cependant, ce moteur (Moteur 2 compose des fonctions verifNomsO et afficheReponseO) 
recuperait en retour du serveur l'identifiant de l'utilisateur dans la table joueurs qui attes- 
tait l'existence du nom de l'utilisateur saisi (sinon le serveur renvoyait la valeur 0). Or, si 
nous ne disposons plus de la valeur de cet identifiant cote client, le systeme d'insertion 
du gain dans la base et d'affichage de l'historique ne peuvent done plus fonctionner (ces 
deux systemes utilisent actuellement la cle primaire du joueur pour ajouter son nouveau 
gain ou selectionner l'historique de ses gains dans la base de donnees). II est done neces- 
saire d'apporter des modifications a ces deux systemes si Ton desire conserver leurs 
fonctionnalites. 

II faut done compenser l'absence de cet identifiant par l'ajout du couple nom et prenom du 
joueur dans les parametres des requetes envoyees au serveur de ces deux moteurs Ajax. 

Ainsi, la fonction jouer( ) du premier moteur doit etre semblable a celle du code 13-25 
apres modification. 

Code 13-25 : fonction jouer( ) : 

function jouerO { 
objetXHR = creationXHRO; 
var temps = new Date( ) .getTimeO ; 
var parametres = "nom="+ codeContenuC'nom") + 

"&prenom="+ codeContenuC'prenom") + 

"&anticache="+temps ; 
objetXHR. open ("get" , "gainAleatoi re.php?"+parametres , true) ; 

} 
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De meme, la fonction demandeGainsO du troisieme moteur doit etre semblable au 
code 13-26 apres modification. 

Code 13-26 : fonction demandeGainsO : 

function demandeGainsO { 
objetXHR3 = creationXHRt ) ; 
var temps = new Date( ) .getTime( ) ; 
var parametres3 = "nom="+ codeContenuC'nom") + 

"&prenom="+ codeContenuC'prenom") + 

"&anticache="+temps ; 
objetXHR3.open( "get" , "gainl_iste.php?"+parametres3, true) ; 

} 

Les fichiers serveur concernes par ces deux requetes doivent, eux aussi, etre modifies de 
sorte a exploiter desormais le couple nom et prenom du joueur et non plus son identifiant 
comme dans le chapitre precedent. 

Les requetes SQL du fichier gainAleatoire.php doivent ainsi etre modifiees en conse- 
quence comme l'illustre le code 13-27. 

Code 13-27 : extrait des instructions modifiees dans le fichier gainAleatoi re.php : 

$requeteSQL="SELECT ID FROM joueurs WHERE prenom='".$prenomJoueur. 

*»"' AND nom='".$nomJoueur. ; 

SreponseSQL = mysql_query($requeteSQL) ; 
$tableau=mysql_fetch_array($reponseSQL) ; 
$commandeSQL="INSERT INTO gains SET montant='" .$gain. " ' , 
^•joueursID='".$tableau["ID"]."', date=N0WO "; 
mysql_query($commandeSQL) ; 

De meme, le fichier gainListe.php devra desormais exploiter une requete avec jointure 
sur les deux tables gains et joueurs pour recuperer l'historique des gains du joueur 
concerne comme l'illustre le code 13-28 ci-dessous. 

Code 13-28 : extrait des instructions modifiees dans le fichier gainListe.php : 

I$commandeSQL="SELECT gains. montant, gains. date FROM gains, joueurs WHERE 
«»gains.joueursID=joueurs.ID AND joueurs. prenom='".$prenom."' AND joueurs. nom='".$nom. ; 
SreponseSQL = mysql_query($commandeSQL) ; 

Les modifications sont maintenant terminees, il ne vous reste plus qu'a enregistrer les 
differents fichiers et tester le nouveau systeme dans le navigateur. 



Test du systeme 



Ouvrez la page index.html dans le navigateur Firefox en appuyant sur la touche F12 
dans Dreamweaver. Commencez par selectionner le nom du joueur desire dans le 
premier menu. Le second menu doit alors proposer la liste de tous les prenoms associes 
au nom selectionne dans le premier menu. Choisissez le prenom de votre choix dans le 
second menu. Une fois la selection effectuee, l'historique des gains du joueur doit appa- 
raitre en bas de l'ecran. Cliquez ensuite sur le bouton JOUER, comme dans les ateliers 
precedents, le bouton doit etre bloque et le chargeur doit apparaitre pendant la periode 
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du transfert. Des le nouveau resultat receptionne, le montant du gain doit s'afficher 
precede du nom du joueur et une nouvelle ligne doit etre ajoutee a l'historique (voir 
figure 13-14). 
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* Avec Cde SQL d'insertion des gains par joueur 

* Avec Cde SQL pour afftcher l'historique des gains du joueur 

* Avec Cde SQL pour Qerer un double menu dvnamiaue 

Figure 13-14 

Test final du systeme avec un double menu deroulant dynamique 



Atelier 13-5 : mise a jour de donnees dans la base de donnees 
Composition du systeme 

Nous avons vu dans 1' atelier 13-3 comment inserer des donnees dans la base a partir 
d'une application Aj ax-PHP. Nous vous proposons maintenant une technique pour que 
l'utilisateur puisse mettre a jour les informations de la base de donnees a partir de la 
meme page. 

Comme d'habitude, nous allons illustrer la mise en oeuvre de cette technique en l'appli- 
quant a notre machine a sous en ligne. Pour cela, nous allons permettre au joueur de 
corriger les resultats de ses propres gains dans le tableau de l'historique. Evidemment, 
l'objectif de cet atelier est purement pedagogique car vous pouvez imaginer qu'en prati- 
que, un certain nombre de joueurs risquent d' abuser de cette nouvelle fonctionnalite pour 
modifier leur gain sans que cela soit justifie... 
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Cette structure est composee : 

• d'une page PHP (index. php) dont la structure de base avant modification est semblable 
a celle de 1' atelier 13-4 ; 

• d'un fichier JS (fonctionsAjax.js) qui contient les fonctions communes a tous les 
moteurs Ajax ; 

• d'un fichier JS (fonctionsMachine.js) qui contient les fonctions specifiques a 1' application 
Ajax de la machine a sous dont la structure de base avant modification est identique a 
celle de 1' atelier 13-4 ; 

• d'un fichier serveur PHP (gainAl eatoi re. php) identique a celui de l'atelier 13-4 ; 

• d'un fichier serveur PHP (gainListe.php) identique a celui de l'atelier 13-4 ; 

• d'un fichier serveur PHP (prenomsListe.php) identique a celui de l'atelier 13-4 ; 

• d'un nouveau fichier serveur PHP (gainModif .php) ayant comme base de depart le 
fichier gainListe.php de l'atelier 13-4 ; 

• d'un fichier PHP de connexion a la base de donnees (connexionMysql .php) identique a 
celui de l'atelier 13-4 ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier 13-4 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le systeme de modification des gains va etre integre au tableau de l'historique que nous 
avons mis en place dans un atelier precedent. Son utilisation est tres simple ; pour modi- 
fier la valeur d'un des gains de l'historique il suffit de cliquer sur le montant a actualiser 
dans le tableau. Celui-ci se transforme automatiquement en champ de saisie en conser- 
vant le montant actuel comme valeur initiale. Vous pouvez alors corriger le montant du 
gain comme dans un champ de formulaire traditionnel. Pour valider votre nouvelle saisie, 
il faut appuyer sur la touche Entree de votre clavier. Une requete Ajax est alors envoyee 
au serveur PHP qui la transmet au serveur de base de donnees pour que la modification 
soit immediatement effective. Si l'operation reussit, le serveur renvoie une information 
de validation au moteur Ajax et le tableau de l'historique est alors actualise pour que la 
nouvelle valeur apparaisse, cette fois en affichage simple, dans la cellule du gain 
concerne. 

Conception du systeme 

Ouvrez la page d'index de l'atelier 13-4 (index. php) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chapl3/atelierl3-5/. Copiez ensuite les autres 
fichiers de l'atelier 13-4 dans ce nouveau dossier. 

Pour effectuer des modifications de donnees dans la table gains de la base, nous allons 
devoir disposer de la cle primaire de l'enregistrement a modifier. II faut done commencer 
par transformer la requete SQL qui recupere les donnees utilisees dans l'historique, soit 
actuellement montant et date, pour ajouter celle du ID de l'enregistrement concerne. 
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Pour cela, nous allons ouvrir le fichier gai nLi ste . php et localiser la ligne dans laquelle est 
creee la requete SQL. Pour recuperer l'identifiant de l'enregistrement, il suffit d'ajouter 
le nom de la colonne que Ton desire recuperer (soit ID precede du nom de la table dans 
laquelle elle se trouve : gains. ID). 



\': 



commandeSQL="SELECT gains. ID, gains. montant, gains. date FROM gains, joueurs WHERE gains 
joueursID=joueurs.ID AND joueurs. prenom="' Jprenom."' AND joueurs. nom='".$nom. ; 



Si nous testons le systeme une fois la modification effectuee, le document JSON 
retourne par le serveur devrait alors avoir une structure semblable a celle de l'exemple 
du code 13-29. 

Code 13-29 : exemple de document JSON renvoye par le serveur apres l'ajout de la 
colonne I D dans la requete SQL : 




Enregistrez le fichier gai nLi ste . php et passons a present cote client pour gerer ce nouveau 
parametre dans la fonction de rappel du fichier fonctionsMachine. js. 

Dans la fonction de rappel afficheGainsO, ajoutez une instruction supplementaire 
d'extraction de l'objet objetJSON dans la boucle for() arm de recuperer la valeur de 
l'identifiant ID comme l'illustre le code 13-30. Une fois la valeur de l'identifiant memo- 
rise dans la variable ID, il faut la passer en argument dans l'appel de la fonction nouvel 1 e- 
Ligne( ) arm de pouvoir ensuite l'utiliser a l'interieur de cette fonction. 

Code 13-30 : modification de la fonction afficheGainsO : 

for(i=0;i<objetJS0N3.gains.length;i++){ 

var montant=objetJS0N3.gains[i] .montant; 

var date=objetJS0N3.gains[i ] .date; 

var ID=objetJS0N3.gains[i].ID; 

nouvel! e Li gnettableLi ste, date, montant, ID) ; 
} 

Une fois l'identifiant ID disponible dans la fonction nouvelleLigneO nous devons l'inte- 
grer dans chaque ligne arm de pouvoir le recuperer par la suite dans la procedure de 
modification d'un gain pour identifier l'enregistrement correspondant. Pour memoriser 
cette information dans la structure de la ligne, nous allons ajouter un nouvel attribut id a 
l'element tr (voir code 13-31). 

Code 13-31 : ajout d'un nouvel attribut id a l'element tr de la nouvelle ligne : 

I function nouvel leLigne(tab,textl,text2, ID) { 
var nouveauTR=document. create El ement( 'tr' ) ; 
nouveauTR.setAttribute( 'id' ,ID) ; 

Dans cette meme fonction nouvelleLigneO, nous devons aussi lier la cellule td (soit 
l'element nouveauTD2) qui contient le gain avec un gestionnaire d'evenement onclick qui 
permet ensuite de declencher le passage en mode modification (remplacement de la 
valeur du gain de la cellule par un champ de saisie). Pour cela, nous allons ajouter 
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l'instruction ci-dessous qui permet d'appeler la fonction modifGainO lorsque le joueur 
clique sur le montant du gain a modifier, en passant comme parametres les elements tr 
(nouveauTR), td (nouveauTD2) et le montant actuel du gain (text2) concernes. 

nouveauTD2.onclick=function( ) { modeModif (nouveauTR, nouveauTD2,text2); } 

Unefois modifiee, la nouvelle fonction nouvelleLigneO doitetre semblable aucode 13-32. 

Code 13-32 : fonction nouvelleLigneO apres modification : 

function nouvel lel_igne(tab,textl,text2,ID) { 
var nouveauTR=document.createElement( 'tr' ) ; 
nouveauTR. setAttributeC 'id' .ID) ; 



var nouveauTDl=document.createElement( 'td' ) ; 

var nouveauTXTl=document.createTextNode(textl) ; 

nouveauTDl.appendChild(nouveauTXTl) ; 

var nouveauTD2=document .createElement( 'td' ) ; 

var nouveauTXT2=document.createTextNode(text2) ; 

nouveauTD2.onclick=function( ) { modeModif (nouveauTR, nouveauTD2.text2) ;} 

nouveauTD2.appendChild(nouveauTXT2) ; 



nouveauTR. appendChild(nouveauTDl) ; 

nouveauTR. appendChild(nouveauTD2) ; 
// 

var nouveauTBODY=document. create El ement( 'tbody ' ) ; 
nouveauTBODY.appendChild(nouveauTR) ; 
tab.appendChild(nouveauTBODY) ; 



} 

II faut maintenant developper la fonction modeModif ( ) qui est appelee lorsque le joueur 
clique sur la valeur du gain a modifier. La premiere instruction de la fonction permet de 
recuperer la valeur de l'identifiant de la ligne contenant le gain a modifier 
(elementTR.getAttribute( 'ID' )) puis de l'affecter a une variable globale nominee idGain 
(de sorte a pouvoir l'utiliser par la suite en dehors de cette fonction). La seconde instruc- 
tion cree un element input et l'affecte a la variable element Input, elle aussi declaree en 
global pour pouvoir y faire reference en dehors de la fonction. 

I function modeModif (elementTR.elementTD.valeurGain) { 
idGain=elementTR.getAttribute('ID'); 
elementlnput = document. createElement( 'input') ; 

Une fois l'element input cree, il faut ensuite le configurer en lui attribuant ses divers attri- 
buts et un gestionnaire d'evenement qui permet de valider la saisie par une simple pres- 
sion sur la touche Entree (le programme de validation est developpe dans une autre fonction 

nominee testEntree( )). 

Code 13-33 : instructions de configuration de l'element elementlnput : 

element I nput.setAttributet 'type' , 'text' ) ; 
element I nput.setAttributet 'name' , 'gain' ) ; 
elementlnput. setAttributet 'size' , '20' ) ; 
element I nput.setAttributet 'velue' , valeurGain) ; 
elementlnput. on key press=test Entree; 
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Une autre alternative (plus compacte) pour configurer l'element input consiste a utiliser 
une structure with comme l'illustre le code 13-34 (equivalent aux instructions de la 
premiere solution du code 13-33). Comme vous pouvez le constater, l'utilisation de with 
permet de declarer initialement l'element concerne par les differentes configurations 
(soit elementlnput dans notre cas) evitant ainsi d'avoir a le declarer au debut de chaque 
instruction et cela dans tout le bloc de la structure with. 

Code 13-34 : seconde technique de configuration de l'element elementlnput : 

with (elementlnput) { 

setAttribute( 'type' , 'text' ) ; 
setAttribute( 'name' , 'gain' ) ; 
setAttribute( 'size' , '20' ) ; 
setAttribute( 'val ue' .valeurGain) ; 
on key press=test Entree; 
} 

Maintenant que l'element input est cree et configure, nous devons l'integrer a une 
nouvelle cellule td avant de pouvoir proceder au remplacement de la cellule td actuelle 
par cette derniere. 

Ivar nouveauTD = document .createElement( "td") ; 
nouveauTD.appendChi Id (element Input) ; 
elementTR. repl aceChildtnouveauTD.elementTD) ; 

La fonction modeModif ( ) complete doit ensuite etre semblable a celle du code 13-35. 

Code 13-35 : fonction modeModif ( ) complete : 

function modeModif (elementTR, elementTD, valeurGain) ( 
idGain=elementTR.getAttribute( ' ID' ) ; 
elementlnput = document. createElementt 'input' ) ; 
with (elementlnput) ( 

setAttributet 'type' , 'text' ) ; 
setAttributet 'name' .'gain'); 
setAttributet 'size' , '20' ) ; 
setAttributet 'value' .valeurGain) ; 
on key press=test Entree; 
} 

var nouveauTD = document. createElementC'td" ) ; 
nouveauTD. appendChild(elementlnput) ; 
el ementTR. repl aceChi 1 d( nouveauTD, el ementTD) ; 
} 

Passons maintenant a la fonction testEntreet ) qui est appelee pour chaque touche saisie 
par l'utilisateur lorsque nous sommes en mode Modification. Le premier objectif de cette 
fonction est de detecter si l'utilisateur a appuye sur la touche Entree afin de declencher le 
traitement d'actualisation de la nouvelle valeur du gain. Pour cela, nous allons utiliser 
une structure deja presentee dans un atelier precedent permettant d'exploiter l'objet event 
quel que soit le type de navigateur utilise (IE ou autre navigateur compatible W3C 
comme Firefox). 

I function testEntree(event) { 
event = window. eventl levent; 
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Une fois l'objet event disponible au sein de la fonction, nous pouvons utiliser sa propriete 
keyCode qui nous permet de recuperer le code de la touche saisie et de le tester pour 
declencher le traitement uniquement s'il s'agit de la touche Entree (soit le code 13 pour la 
touche Entree). 

var codeTouche= event. keyCode; 
if (codeTouche==13) // Test si touche Entree 
{ 

// Traitement de la valeur saisie 
} 

Pour traiter la nouvelle valeur du gain, nous devons l'envoyer a un programme PHP qui 
permet de creer une requete SQL en rapport pour effectuer la mise a jour dans la base. 
Pour cela, nous allons faire appel a un nouveau moteur Ajax pour que ce traitement se 
fasse sans reactualiser la page comme nous en avons l'habitude maintenant. 

Nous allons done appeler la fonction modifGain( ) d'un nouveau moteur, mais avant cela 
nous devons preparer les parametres que nous allons communiquer a cette fonction. Pour 
realiser la mise a jour, le moteur Ajax a besoin de deux valeurs, la premiere est l'identi- 
fiant de l'enregistrement qui doit etre modifie idGain. Ce dernier ayant ete declare en 
variable globale nous pouvons done en disposer au sein de cette fonction et l'indiquer 
en premier argument de la fonction modifGainO sans action prealable. Le second est la 
valeur du nouveau montant du gain que l'utilisateur vient de saisir. Pour cette seconde 
information, nous devons lire la valeur de l'element Input (soit elementlnput, disponible 
dans cette fonction car il a ete, lui aussi, declare prealablement en global) avant de l'inserer 
en second argument de la fonction modifGainO. 

I var nouveauGain=element Input. value; 
modifGain(idGain.nouveauGain) ; 

Une fois creee, la nouvelle fonction testEntree( ) doit etre semblable au code 13-36. 

Code 13-36 : fonction testEntreeO complete : 

function testEntree(event) { 
event = window. event | |event; 
var codeTouche= event. keyCode; 
if (codeTouche==13) // Test si touche Entree 
{ 
var nouveauGain=element Input. value; 
modifGain(idGain.nouveauGain) ; 
} 
} 

Pour la creation du nouveau moteur, nous allons commencer par copier les deux fonc- 
tions d'un precedent moteur arm de beneficier de la structure commune a tous les 
moteurs Ajax. Renommons la premiere fonction modifGainO et saisissez id et montant 
comme arguments dans les parentheses de la fonction. 

| function modifGain(id, montant) { 

Dans cette nouvelle fonction, nous allons commencer par preparer les parametres que 
vous allez communiquer dans la requete asynchrone en y integrant les deux arguments de 
la fonction. 
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I var parametres = "id="+ id + 
"&montant="+ montant + 
"&anticache="+temps ; 

Modifiez ensuite le second argument de la methode open ( ) en indiquant le nom du fichier 
serveur ga i nModi f . php qui est charge de faire la mise a jour de la base de donnees. 

objetXHR5. open ("get" , "gai nModi f.php?"+parametres, true) ; 

Declarez ensuite actual iserGain comme etant le nom de la fonction de rappel du moteur 

Ajax. 

objetXHR5.onreadystatechange = actualiseGain; 

Une fois les modifications effectuees, la fonction modifGainO doit etre semblable au 
code 13-37. 

Code 13-37 : fonction modifGain( )apres modification : 

function modifGain(id, montant) { 

objetXHR5 = creationXHRC ) ; 

var temps = new DateO .getTimeO; 

var parametres = "id="+ id + 

"&montant="+ montant + 
"&anticache="+temps ; 

objetXHR5. open ("get" , "gai nModi f .php? "+paramet res, true) ; 

objetXHR5.onreadystatechange = actualiseGain; 

objetXHR5.send(null); 
} 

Passons maintenant a la fonction PHP gai nModi f .php qui va traiter cette requete. 

Pour creer ce fichier, nous partons sur la base du fichier gainListe.php que nous enregis- 
trons sous le nom gai nModi f .php. A l'interieur du fichier, configurez deux structures if ( ) 
afin de receptionner les deux variables HTTP i d et montant qui ont ete passees en parametres 
lors de l'envoi de la requete Ajax. 

i f ( i sset ( $_REQUEST[ ' id'])) $i d=$_REQUEST[ 'id']; 

else $id=0; 

if(isset($_REQUEST['montant'])) $montant=$_REQUEST[ 'montant'] ; 

else $montant=0; 

Configurez ensuite la commande SQL qui permet de faire la mise a jour du gain. Cette 
commande identifie l'enregistrement a actualiser en se referant a sa cle primaire ID par 
une clause WHERE. 

$commandeSQL="UPDATE gains SET montant='".$montant."' WHERE ID='".$id. ; 

Lors de la soumission de la commande SQL au serveur de base de donnees avec la fonc- 
tion mysl_query() nous allons recuperer la valeur retournee dans une variable Ireponse 
(soit true si la soumission a ete effectuee correctement ou false dans le cas contraire). 
Cette meme variable est ensuite renvoyee au navigateur afin d'attester que la mise a jour 
a bien ete effectuee. 

IreponseSQL = mysql_query($commandeSQL) ; 
echo $reponseSQL ; 
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Le fichier gainModif . php complet doit ensuite etre semblable au code 13-38. 
Code 13-38 : fichier gainModif .php : 



; charset=utf-8" 
private") ; 



header ("Content-Type: text/plain 

headerC'Cache-Control : no-cache , 

header( "Pragma: no-cache"); 

if(isset($_REQUEST['id'])) $id=$_REQUEST['id'] ; 

else $id=0; 

if(isset($_REQUEST['montant'])) $montant=$_REQUEST['montant']; 

else $montant=0; 

require_once( 'connexionMysql .php' ) ; 

mysql_select_db( "machineasous" ) ; 

$commandeSQL="UPDATE gains SET montant='".$montant."' WHERE ID='".$id."'" ; 

SreponseSQL = mysql_query($commandeSQL) ; 

echo $reponseSQL ; 

Retournons maintenant cote client pour terminer la configuration du moteur Ajax dans le 
fichier fonctionMachine. js. Apres avoir renomme la fonction de rappel du moteur Ajax 
avec actual iseGainO, placez-vous apres l'instruction de recuperation de l'information 
retournee par le fichier serveur (nouveauResul tat) et ajoutez un test i f ( ) afin de condition- 
ner l'appel de la fonction demandeGainO par l'etat de l'information retournee. Ajoutez 
ensuite une structure alternative else afin d'afficher une fenetre d'alerte signalant un 
probleme technique dans le cas contraire. 

I if (nouveauResul tat) demandeGainsO; 
else alertC'probleme technique"); 

Ainsi, lorsque le navigateur receptionne la confirmation de la mise a jour du gain (dans ce 
cas nouveauResul tat est egal a true) la fonction demandeGainO est appelee et le tableau de 
1'historique est reinitialise avec les nouvelles valeurs de la base de donnees. 

Une fois les modifications effectuees, la fonction de rappel actual iseGainO complete est 
semblable au code 13-39. 

Code 13-39 : fonction de rappel actual iseGainO : 

function actualiseGain(){ 
if (objetXHR5.readyState == 4) { 
if (objetXHR5. status == 200) { 
var nouveauResul tat = objetXHR5. responseText; 
if (nouveauResul tat) demandeGainsO ; 
else alertC'probleme technique"); 
} 
} 
} 



Test du systeme 



Ouvrez la page i ndex . html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Commencez par selectionner le nom d'un joueur dans le premier menu 
puis son prenom dans le second menu. Des la selection du prenom, le tableau de 1'histo- 
rique correspondant avec le joueur doit s'afficher en bas de l'ecran. Choisissez un gain a 
modifier et cliquez sur sa cellule. Celle-ci doit alors se transformer en un champ de saisie 
avec comme valeur initiale celle du gain actuel. Modifiez cette valeur puis appuyez sur la 
touche Entree du clavier pour valider votre saisie. La requete doit alors etre envoyee au 
serveur et si l'actualisation de la base s'est bien effectuee, celui-ci doit renvoyer une 
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information de confirmation en retour qui declenche une seconde requete pour actualiser 
le tableau de l'historique avec les nouvelles valeurs de la base de donnees. 



Figure 13-15 
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Bibliotheque jQuery 



Jusqu'a present, pour realiser nos moteurs Ajax, nous avons utilise l'objet XMLHttp- 
Request et certaines proprietes et methodes JavaScript pour manipuler le DOM. Comme 
vous avez pu le constater, leurs syntaxes et surtout leurs compatibilites avec les naviga- 
teurs ne sont pas toujours sans poser de problemes. Pour solutionner cela, nous allons 
maintenant faire usage d'une bibliotheque d'objets JavaScript qui va se substituer aux 
scripts habituels. 

II existe plusieurs bibliotheques JavaScript de ce genre actuellement, comme Prototype 
par exemple, mais dans le cadre de cet ouvrage nous avons choisi de vous presenter 
jQuery car cette bibliotheque remporte actuellement un succes croissant chez les deve- 
loppeurs. A tel point que certains CMS de renom, comme Drupal ou Spip, l'ont deja 
adoptee, ce qui laisse presager d'un avenir prometteur pour elle. 



Introduction a jQuery 

jQuery est une bibliotheque JavaScript qui permet de manipuler le DOM tres facilement, 
de gerer les evenements, de creer des effets graphiques et d'implementer des moteurs 
Ajax avec une syntaxe tres simple et concise. La plupart des instructions jQuery 
commencent par la creation d'un objet jQuery auquel on applique ensuite une ou 
plusieurs methodes. 

La classe jQuery 

L'instanciation d'un objet jQuery peut etre realisee avec la syntaxe suivante : 

jQuery () 

Cependant, en pratique nous utilisons toujours le raccourci suivant qui est un alias de 
l'appel a la classe jQuery : 

$() 
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Les selecteurs 



L'objetj Query va nous permettre de selectionner les elements du DOM que nous desi- 
rons manipuler. Pour cela, nous allons inserer entre les parentheses un selecteur semblable 
a ceux des CSS pour definir l'element (ou les elements) desire(s). 

Par exemple, pour selectionner tous les elements <p> de la page, nous allons creer un 
objet jQuery de la maniere suivante : 

$("p") 

De meme, si nous voulons selectionner l'ensemble des elements portant sur la classe 
menu, nous utiliserons le code suivant : 

$(".menu") 

Enfin, pour selectionner l'element dont l'identifiant est info, il faut alors utiliser le code 
ci-dessous : 

$("#info") 



Les autres selecteurs jQuery 

Utilisation de la syntaxe des CSS n'est pas la seule maniere de selectionner un element du DOM avec 
jQuery. En effet, il est aussi possible d'exploiter certaines syntaxes XPATH ou encore des methodes 
propres a I'objet jQuery, seules ou couplees avec la syntaxe CSS comme I'illustre I'exemple ci-dessous. 

$("#info > 11") 

Cette instruction selectionne tous les elements <1 1 > enfants de l'element dont l'identifiant est i nfo. 
Pour decouvrir les autres selecteurs utilisables avec jQuery, rendez-vous sur le site suivant : 
http://docs.jquery.com/DOM/Traversing/Selectors 



Les methodes 

Une fois l'element (ou le groupe d'elements) selectionne, nous pouvons lui appliquer des 
methodes de la classe jQuery avec la syntaxe pointee : 

$( selecteur) .methode( ) ; 

II est aussi possible d'appliquer plusieurs methodes les unes a la suite des autres. Dans ce 
cas les methodes s'executeront comme elles se lisent, de la gauche vers la droite : 

$( selecteur) .methodelO .methode2() .methode3( ) ; 

Avant de passer a la creation d'un moteur Ajax avec jQuery, nous vous proposons de 
vous initier rapidement a 1' usage de cette bibliotheque dans les parties suivantes avec 
quelques exemples d' instructions jQuery classees par themes. 

Tester le chargement du DOM 

Pour tester le chargement complet d'une page Web, nous avons jusqu'a maintenant 
utilise le code ci-dessous : 

I window. onload = functionO { 
//mettre ici les instructions qui s'executent si la page complete est chargee. 
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Si Ton applique la methode load( ) a l'element window, l'equivalent en jQuery serait alors 
le code ci-dessous : 



$(window) .load(function( ) { 
//mettre ici les instructions qui 



s'executent si la page complete est chargee. 



Cependant, en general, le chargement des elements du DOM est assez rapide. Mais, si la 
page contient des images, il faut attendre leurs chargement complet pour que la methode 
1 oad( ) reagisse, alors que cela n'est pas necessaire pour pouvoir appliquer des methodes 
jQuery ou des gestionnaires d'evenements aux elements du DOM. 

Aussi, pour optimiser la declaration des methodes ou des gestionnaires d'evenements, 
jQuery met aussi a votre disposition une methode specifique ready( ) qui permet de detec- 
ter la fin du chargement des elements du DOM sans attendre le chargement des images 
ou autres composants qui pourraient freiner leur configuration. Cette methode s'appli- 
quera par contre a l'element document comme l'illustre le code ci-dessous. 



$(document) . ready (functi on () { 

// mettre ici les instructions qui 
}); 



s'executent si le DOM est charge 



Instructions de manipulation du DOM avec ou sans jQuery 

Pour bien comprendre Taction des instructions jQuery pour chacun des exemples ci- 
dessous, nous allons rappeler l'instruction equivalente qui ne fait pas appel a la classe 
jQuery. 



Installation de la bibliotheque jQuery 

Pour que ces instructions jQuery puissent etre utilisees en guise d'alternatives aux methodes de manipu- 
lation du DOM courantes, il convient au prealable de disposer de la bibliotheque jQuery. Pour cela, vous 
devez la telecharger(*) sur le site j que ry . com (voir figure 1 4-1 ) puis copier le fichier j que ry . j s dans un 
repertoire de votre site. Pour disposer de la classe jQuery et de ses nombreuses methodes, il faut evidem- 
ment faire reference a ce fichier en ajoutant une balise <scri pt> dans la page HTML concernee. 

<script src=" jquery. js" type="text/javascript"X/script> 

(*) La bibliotheque jQuery existe en version compressee (dans ce cas le code des classes et methodes de 
la bibliotheque n'est pas lisible) ou non compressee (fichier plus volumineux mais avec un code lisible), la 
premiere version etant evidemment beaucoup plus legere et done plus rapide a charger que la seconde. 
Pour un usage en production, nous vous conseillons de prendre la version compressee (Pack : environ 
30ko) sachant que si vous desirez parcourir les instructions de la bibliotheque, vous avez toujours la 
possibilite de consulter la version non compressee. 

A noter qu'il est aussi possible d'utiliser une bibliotheque en ligne pour vos developpements si vous desi- 
rez faire rapidement des tests sans avoir a telecharger le fichier jquery .js sur votre ordinateur (vous 
pouvez trouver ci-dessous un exemple de balise permettant d'acceder a une bibliotheque en ligne). 
Cependant, en production il est fortement recommande d'installer sa propre bibliotheque jQuery directe- 
ment sur son serveur si vous desirez que le chargement de votre application Ajax ne soit pas tributaire 
d'un serveur externe. 

<script type="text/ javascript" src="http: //code. jquery. com/ jquery-litest. pack. js"X/script> 
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Installation de la bibliotheque jQuery (suite) 
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Figure 14-1 

Page de telechargement de la bibliotheque jQuery sur le site www.jquery.com 



Verifier que le DOM est bien charge 

jQuery permet de manipuler le DOM ou encore de configurer des gestionnaires d'evenements. Cepen- 
dant, avant d'appliquer les methodes jQuery aux elements du document, il convient de s'assurer que le 
DOM est completement charge. Pour cela, jQuery propose la methode ready( ) qui permet de verifier 
que le DOM est integralement charge, ce qui evite d'utiliser window. onload( ). Aussi, si vous desirez 
tester individuellement les differents exemples de cette partie, nous vous recommandons d'utiliser cette 
methode et d'y inclure le code a tester comme indique ci-dessous. 

$(document) .ready(function(){ 

//mettre ici le code jQuery a tester 
}); 



Recuperer l'element dont l'identifiant est charge : 

Code 14-1 : sans jQuery : 

document. get Element By Id ( "charge") ; 
Code 14-2 : avec jQuery : 

$("#charge"); 
Recuperer la liste des elements <p> d'une page Web 
Code 14-3 : sans jQuery : 

document, get El ementsByTagNameC'p") ; 
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Code 14-4 : avec jQuery : 

$(V): 
Changer le style col or d'un element dont l'identifiant est 1 nf o : 

Code 14-5 : sans jQuery : 

document. get Element By Id ("info") .style. colore "red" ; 
Code 14-6 : avec jQuery : 

$( "#info" ) .ess ("col or" ,"red") ; 
Recuperer le texte d'un element <div> dont l'identifiant est info : 
Code 14-7 : sans jQuery : 

document. get Element By Id ("info") .firstChild.nodeVal ue; 
Code 14-8 : avec jQuery : 

$("#info").text(); 
Recuperer la valeur d'un element <input> dont l'identifiant est nom : 
Code 14-9 : sans jQuery : 

document. get Element By Id ("nom" ). value; 
Code 14-10 : avec jQuery : 
| $("#nom").val(); 

Remplacer le texte d'un element <di v> dont l'identifiant est i nf o par un autre texte : 
Code 14-11 : sans jQuery : 

document. get Element By Id ("info") .firstChild.nodeVal ue="Def ranee" ; 
Code 14-12 : avec jQuery : 

$( "#1 nf o"). html ("Def ranee"); 

Remplacer le texte d'un element <div> dont l'identifiant est info par un fragment 
HTML : 

Code 14-13 : sans jQuery : 

document. get Element By Id ("info") . innerHTML="<b>Def rance</b>" ; 

Code 14-14 : avec jQuery : 

$ ( "#inf o" ) . html ( "<b>Def rance</b>" ) ; 

Ajouter a la balise <body> un nouvel element <div> contenant le texte Def ranee en lui 
attribuant un style background : 



Code 14-15 : sans jQuery : 



var element = document .getElementsByTagNamet "body" ) ; 

var nouveauElement = document. createElementt "div" ) ; 

var nouveauContenu = document. createTextNode( "Def ranee") 
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Inouvea u El ement. sty le.backg round= 'yellow' ; 
nouveauEl ement. appendChild(nouveauContenu) ; 
el ement [0] .appendChild( nouveauEl ement) ; 

Code 14-16 : avecj Query : 

$('<div></div>') 
.html ( 'Bonjour') 
.css( 'background' , 'yellow') 
. appendToC'body") ; 

Je pense qu'avec ces quelques exemples, vous etes maintenant convaincu que 1' utili- 
sation de jQuery permet de rendre le code beaucoup plus compact et qu'il ameliore ainsi 
sa lisibilite et sa maintenance. 



Les autres methodes de manipulation d'element du DOM de jQuery 

Pour decouvrir les autres manipulation DOM utilisables avec jQuery, utilisez le lien ci-dessous 
http://docs.jquery.com/Manipulatlon 



Configuration de gestionnaires d'evenements avec ou sans jQuery 

jQuery permet aussi de configurer des gestionnaires d'evenements comme l'illustre 
l'exemple ci-dessous. 

Configuration du gestionnaire d'evenement cl i ck( ) pour la balise dont l'identifiant 

est monLien : 

Code 14-17 : sans jQuery : 

window. onload=function( ) { 
document.getElementById("monLien").onclick=function( ) 

{alertC'Merci d'avoir clique sur ce lien !");); 
}; 

Code 14-18 : avec jQuery : 

S(document) .ready(function( ) { 
$ ( "#monl_i en") .cl i ck( f uncti on ( ) 

{alertC'Merci d'avoir clique sur ce lien !");} 
): 
); 



Les autres gestionnaires d'evenements jQuery 

Pour decouvrir les autres gestionnaires d'evenements utilisables avec jQuery, utilisez le lien ci-dessous : 
httpj/docs.jquery. com/Events 



Creation d'effets graphiques avec jQuery 

Meme s'il existe de nombreux plug-ins qui vous permettent ensuite d'enrichir votre 
interface avec des animations de nouvelle generation, jQuery propose deja en standard 
quelques methodes pour realiser rapidement des effets graphiques simples comme 
l'illustrent les exemples ci-dessous. 
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Faire apparaitre progressivement le texte des elements <div> au chargement de la 
page: 

Code 14-19 : avecj Query : 

$( document) .ready(function( ) { 
$("div") .fade In ("slow") ; 
); 



); 

Rendre visible le texte de l'element dont l'identifiant est 1 nf o : 

Si l'element concerne est lie a un style qui le rend invisible au chargement de la page, il 
convient d'utiliser dans ce cas le style di spl ay et non vi si bi 1 i ty. 

Code 14-20 : avec jQuery : 

$("#info").show(); 



Les autres effets jQuery 

Pour decouvrir les autres effets utilisables avec jQuery, utilisez le lien ci-dessous : 
http://docs.jquery.com/Effects 



Creation de moteurs Ajax avec jQuery 

jQuery ne sert pas seulement a manipuler les elements du DOM, a creer des effets graphi- 
ques ou a configurer des gestionnaires d'evenements, il possede aussi une serie de 
methodes specifiques a la mise en oeuvre d' applications Ajax. 

Creation et configuration d'une requete Ajax POST asynchrone : 

Code 14-21 : sans jQuery : 

objetXHR = creationXHRO; 

var parametres = "nom=Defrance&prenom=Jean-Marie" ; 
objetXHR. open( "post" , " serveur.php ", true); 
objetXHR. onreadystatechange = fonctionRappel ; 

objetXHR. set RequestHeader( "Content-Type". "appl ication/x-www-form-url encoded") ; 
objetXHR. send(parametres) ; 
function fonctionRappel ( ) { 
if (objetXHR. readyState == 4) { 
if (objetXHR. status == 200) { 
var reponse = objetXHR. responseText; 
alert( "La reponse est : " + reponse ); 
} 
} 
} 

function creationXHRO { 
var resultat=null ; 
try { 
resultat= new XMLHttpRequestt ) ; 
} 

catch (Error) { 
try { 
resultat= new ActiveX0bject("Msxml2.XMLHTTP") ; 
} 
catch (Error) { 



Ateliers de creation d'applications Ajax-PHP 



Partie III 



try [ 

resultat= new Acti veXObjectt "Microsoft. XMLHTTP") ; 
} 
catch (Error) { 

resultat= null ; 



} 

return resultat; 



} 

Code 14-22 : avecj Query : 

$.ajax({ 

type: 'POST', 
url : 'serveur.php' , 

data: "nom=Defrance&prenom=Jean-Marie" , 
success: fonctionRappel 
}): 
function fonctionRappel (reponse) { 

alertt "La reponse est : " + reponse ); 
} 

Avec les moteurs Ajax, plus encore qu'avec d'autres actions, j Query permet d'obtenir un 
code tres concis, lisible et simple a maintenir. Si on ajoute a cela le fait que ces moteurs 
peuvent etre utilises sans probleme sur la plupart des navigateurs sans avoir a faire des 
scripts de test et prevoir des instructions alternatives pour que votre moteur puisse fonc- 
tionner, vous conviendrez qu'il devient tres interessant d'utiliser la bibliotheque jQuery. 

Dans le code 14-22, vous remarquerez que cette fois l'objet jQuery (instancie par $) n'a 
pas de parentheses car il n'est pas utilise comme selecteur (la methode ajax( ) ne s'appli- 
quant pas a un element specifique du DOM). 

De meme, la methode ajaxO comporte plusieurs options (type, url, data, success) qui 
permettent de configurer la requete Ajax ainsi creee. En realite, il existe de nombreuses 
autres options possibles pour cette methode ajaxO mais comme leur valeur par defaut 
correspond a la valeur courante des requetes Ajax, leur configuration n'est alors pas 
necessaire. Par exemple, l'option async permet d'indiquer si la requete doit etre effectuee 
en mode asynchrone (qui est la valeur par defaut, soit true) ou synchrone (si Ton attribue 
false a cette option). Ainsi, si vous desirez faire une requete Ajax synchrone, il suffit 
simplement d'ajouter l'option async: false a la liste des options de la methode (pour 
connaitre les differentes options de la methode ajaxO, utilisez le lien de l'encadre ci- 
dessous, cliquez alors sur jQuery. ajax(option), puis sur l'onglet Options). 

De meme, il est interessant de remarquer que la valeur de la reponse du serveur est 
envoyee automatiquement dans l'argument de la fonction de rappel (fonctionRap- 
pel (reponse)). II devient done inutile de faire appel a la propriete responseText de l'objet 
XHR pour recuperer cette valeur comme nous le faisions avant d'utiliser un moteur avec 
jQuery. 



Les autres methodes Ajax de jQuery 

Pour decouvrir les autres methodes Ajax utilisables avec jQuery, utilisez le lien ci-dessous : 
http://docs.jquery. com/Ajax 
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Visual jQuery 

Pour chaque famille d'instructions jQuery abordee dans les parties precedentes, nous avons indique les 
liens sur la documentation officielle correspondante. Cependant, il existe une interface graphique qui 
permet d'acceder a ces differentes informations en selectionnant successivement des options dans un 
menu. Cette interface se trouve a I'adresse ci-dessous et nous vous invitons a I'ajouter a vos favoris pour 
faciliter vos futurs developpements. 
http://visualjquery. com 
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the correct MIME type in the response {eg, xml as "text/xml"). Sending the wrong MIME 
type can lead to unexpected problems in your script, see [[specifying the Data Type for 
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lg) type - The type of request to make ("POST" or "GET'), default is "GET'. 
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timeouts. 



Figure 14-2 

Interface de Visual jQuery 



Atelier 14-1 : requete asynchrone POST et reponse au format 
Texte avec jQuery 

Composition du systeme 

Afin que vous puissiez bien identifier les scripts a integrer pour developper un moteur 
Ajax a l'aide de jQuery, nous allons reprendre certaines des applications deja presentees 
et les modifier pour exploiter la bibliotheque jQuery. Le fonctionnement de ces applica- 
tions est identique a celui des ateliers que nous allons utiliser comme base de depart et 
nous vous invitons a vous reporter a la partie qui presente l'atelier d'origine pour vous 
rememorer son fonctionnement. 

Nous allons commencer par reprendre le systeme de l'atelier 11-1 qui exploitait une 
requete Ajax POST pour transmettre les valeurs du champ nom et prenom au serveur. 
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Cette structure est composee : 

• d'une page HTML (i ndex. html ) dont la structure est identique a celle de l'atelier 11-1 ; 

• du fichier de la bibliotheque j Query (jquery. js) qui est telecharge puis ajoute dans un 
repertoire de cet atelier ; 

• d'un fichier JS (fonctionsMachine.js) qui contient les fonctions specifiques al'application 
Ajax de la machine a sous dont la structure de base avant modification est semblable a 
celle de l'atelier 11-1 ; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celle de 
l'atelier 11-1 ; 

• d'une feuille de styles (styl e . ess) identique a celle de l'atelier 10-4 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Vous avez certainement remarque que la structure de ce premier atelier j Query comporte 
maintenant le fichier de la bibliotheque jquery. js et que le fichier fonctionsAjax.js 
regroupant les differentes fonctions communes aux moteurs Ajax et a la manipulation 
d'elements du DOM, desormais inutiles, a ete supprime. 

Fonctionnement du systeme 

Le fonctionnement du jeu est identique a celui de l'atelier 11-4 que nous allons prendre 
comme base de depart pour effectuer nos modifications. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 11-1 precedent (i ndex. html ) et sauvegardez-la sous le 
meme nom dans un nouveau repertoire nomme /chapl4/atelierl4-l/. Copiez ensuite les 
autres fichiers de l'atelier precedent dans ce nouveau dossier. 

Commencez par telecharger la derniere version de la bibliotheque j Query sur le site 
jquery.com. Une fois sur la page d'accueil, cliquez sur le lien download dans le menu du 
haut puis selectionnez la version courante Current Rel ease - Packed, (pour nos essais nous 
avons utilise la version 1-2). Apres avoir telecharge le fichier sur votre ordinateur, renom- 
mez-le avec le nom jquery. js et copiez-le dans le meme repertoire que celui de l'atelier 
actuel. 

Ouvrez ensuite la page index.html et ajoutez une balise de script faisant reference a la 
bibliotheque jquery. js que nous venons de telecharger et supprimez la balise faisant 
reference au fichier fonctionsAjax.js. 

<script src="jquery. js" type="text/javascript"X/script> 

Ouvrez ensuite le fichier fonctionsMachine.js et commencez par ajouter l'equivalent 
d'un gestionnaire d'evenement oncl ick afin d'appeler la fonction jouer( ) lorsque l'utili- 
sateur clique sur le bouton JOUER. 

$('#button').click(function () {jouerO;}); 

Afin de s' assurer que cette methode . cl i ck( ) est appliquee au bouton uniquement apres 
le chargement des elements du DOM, nous allons conditionner son initialisation par 
la methode . ready ( ) (revoir si besoin l'encadre concernant cette methode en debut de ce 
chapitre). 



Bibliotheque jQuery 



Chapitre 14 

I$(document).ready(function() { 
$( '//button' ) .clickt function () {jouerO;}); 
»! 

Pour information, le gestionnaire d'evenement equivalent sans jQuery que nous aurions 
du utiliser en JavaScript aurait ete alors le suivant. 

document. get Element By Id ("button") .onclick=jouer; 

Localisez ensuite la fonction jouer( ) qui va etre appelee lors de 1' envoi de la requete Ajax 
au serveur. Supprimez tout le contenu de cette fonction puis inserez l'appel de la 
methode Ajax de jQuery. 

$.ajax({ ... }); 

Ajoutez ensuite a l'interieur des accolades de cette methode les options necessaires a la 
configuration de la requete. 

II s'agit de l'option type pour commencer avec la valeur POST (par defaut la valeur de 
l'option type etant GET) afin d'indiquer que la requete utilise la methode HTTP POST. 

type: 'POST', 

Suivi de l'option url qui permet de nommer le fichier qui assure le traitement de la 
requete cote serveur. Dans le cadre de cet atelier, nous conserverons le meme fichier 
serveur que dans 1' atelier 11-1, la valeur de l'option url doit done etre gainAleatoire.php. 

url: 'gainAleatoire.php', 

Puis l'option data qui contient les donnees au format d'URL a envoyer avec la requete. 
A noter que pour recuperer les valeurs des champs de saisie nom et prenom, nous allons 
utiliser aussi deux autres objets jQuery qui permettent de selectionner les elements selon 
leur id, puis la methode val ( ) qui permet de recuperer la valeur des elements ainsi selec- 
tionnes. 

data: "nom="+ $( '#nom' ) .val ( )+"&"+"prenom="+ $('#prenom') .val(), 

Les donnees du serveur etant renvoyees au format Texte nous indiquons explicitement le 
format utilise a l'aide de l'option dataType. 

dataType: 'text', 

Et enfin l'option success, qui designe la fonction de rappel du moteur, comme nous le 
faisions avec la propriete onreadystatechange dans les moteurs avant d' utiliser jQuery. 

success: actual iserPage, 

A noter qu'il est aussi possible d'ajouter l'option error afin de traiter les eventuels 
problemes de serveur comme nous le faisions deja en testant la valeur de status dans la 
fonction de rappel du moteur de 1' atelier 11-1. 

error: functionO {alert( 'Erreur serveur');} 

Une fois toutes les options parametrees, la fonction jouerO doit etre semblable au 
code 14-23 ci-dessous : 

Code 14-23 : fonction jouerO avec jQuery : 

function jouerO { 
$.ajax(( 

type: 'POST', 

url: 'gainAleatoire.php', 
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data: "nom="+ $( '#nom' ) .val ( )+"&"+"prenom="+ $('#prenom' 

dataType: 'text', 

success: actual iserPage, 

error: functionO {alertt 'Erreur serveur');} 



.valC 



}); 



Pour information, nous indiquons ci-dessous (code 14-24) la fonction jouerO equiva- 
lente sans jQuery. Nous vous invitons a comparer ces instructions avec celles du code 14-23 
dans lequel nous avons utilise les methodes de la bibliotheque jQuery. 

Code 14-24 : fonction jouerO sans jQuery : 

function jouerO { 
objetXHR = creationXHRO; 

var parametres = "nom="+ codeContenu("nom")+"&"+"prenom="+ codeContenuCprenom" ) ; 
objetXHR. open ("post" ."gainAleatoi re.php" , true) ; 
objetXHR. onreadystatechange = actualiserPage; 

objetXHR. setRequestHeader( "Content-Type" , "appl ication/x-www-form-url encoded") ; 
objetXHR. send (parametres) ; 
} 

La fonction de creation et de configuration de la requete Ajax est maintenant terminee, 
mais il nous reste encore a creer la fonction de rappel actual iserPageO pour que le 
systeme soit operationnel. Pour cela, nous allons aussi commencer par supprimer le contenu 
de la fonction de rappel que nous avons recupere de 1' atelier 11-1. 

I function actualiserPageO { 
}' 

Comme nous 1' avons indique dans la presentation du moteur Ajax avec jQuery, la valeur 
de la reponse du serveur est envoy ee automatiquement dans 1' argument de la fonction de 
rappel, il convient done de l'ajouter entre les parentheses. 

I function actual iserPage(reponse) { 

Le programme serveur etant identique a celui de 1' atelier 11-1, les donnees sont done 
envoyees au format texte et separees par le symbole « : ». II faut done filtrer la reponse 
du serveur a l'aide de la fonction splitC':") pour recuperer les deux informations (le 
resultat et le nom du gagnant) dans un tableau de variables nouveauResultat comme nous 
l'avions deja fait dans 1' atelier 11-1. 

function actual iserPage(reponse) { 
var nouveauResultat = reponse. spl it(":"); 



} 

Une fois les donnees disponibles dans le tableau nouveauResultat,il suffit d'utiliser la 
methode jQuery . html ( ) pour integrer le resultat du jeu et le nom du gagnant dans la chaine 
de caracteres 1 nf o (pour memoire, cette chaine de caracteres est composee de deux balises 
dont des identifiants sont resultat et gagnant). 

I$( '#resultat' ) .html (nouveauResultat[l]) ; 
$( '#gagnant') .html (nouveauResultat[0]) ; 
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La derniere action a effectuer consiste maintenant a rendre visible la chaine de caracteres 
d'identifiant info. Pour cela, nous allons utiliser la me thode j Query .ess qui permet de 
modifier la valeur d'un style. Dans notre cas, nous allons remplacer la valeur hidden du 
style visibility de l'element info par la valeur visible. 

$( '//info' ) .cssC'vi sibil ity" , "visible" ) ; 

A noter que si nous avions utilise initialement le style display a la place de visibility 
pour gerer l'affichage de l'element info dans la feuille de styles (la directive equivalente 
de la regie de styles #1 nf o aurait ete alors di spl ay : none) nous aurions pu utiliser avanta- 
geusement les me thodes j Query .showO et .hideO comme l'illustre le code ci-dessous 
(pour plus d' informations sur ces deux methodes vous pouvez consulter l'API reference 
Effects de la documentation j Query en ligne : http://docs.jquery.com/Effects). 

$C//info').showO; 

Une fois terminee, la fonction actual iserPageO doit etre semblable au code 14-25 ci- 
dessous. 

Code 14-25 : fonction actual iserPageO avecjQuery : 

function actual iserPage(reponse) { 

var nouveauResultat = reponse.spl it(" : " ) ; 

$( '#resul tat'). html (nouveauResultat[l]) ; 

$( '//gagnanf ) .html (nouveauResul tat[0]) ; 

$( '#info' ) .ess ( "vi sibil ity" , "visible") ; 
} 

Pour information, nous indiquons ci-dessous (code 14-26) la fonction actual iserPageO 
equivalente n'utilisant pas jQuery. Nous vous invitons a comparer ces instructions avec 
celles du code 14-25 dans lequel nous avons utilise les methodes de la bibliotheque 
jQuery. 

Code 14-26 : fonction actual iserPageO sans jQuery : 

function actual iserPage( ) { 
if CobjetXHR.readyState == 4) { 
if (objetXHR. status == 200) { 
var nouveauResultat = objetXHR. responseText. splitO :") ; 
rempl acerContenuC'resultat" , decodeURK nouveauResul tat[l]) ) ; 
rempl acerContenuC'gagnant" , decodeURI(nouveauResultat[0])) ; 
document. get El ementByldt" info") . sty le.vi sibil ity=" visible" ; 



} 

Le systeme est maintenant operationnel. Cependant, dans l'atelier 11-1, nous avions 
ajoute des instructions de gestion de l'affichage de 1' animation et du blocage du bouton 
JOUER pendant le temps de traitement serveur de la requete Ajax. Avec jQuery cela est 
d'autant plus facile de gerer ce genre de fonctionnalite qu'il existe deux methodes 
dediees a detecter le debut et la fin du traitement serveur (ajaxStartO et ajaxStop( )). 

Pour la gestion de l'affichage de 1' animation, nous devons coupler ces deux methodes 
avec la me thode jQuery .cssO que nous avons utilisee precedemment comme l'illustre le 
code ci-dessous : 

I $( '//charge' ).ajaxStart(function(request, settings) { $(this) .cssC'visibility", "visible") }); 
$( '//charge' ).ajaxStop(function(request, settings)! $(this). cssC'visibility", "hidden") }); 
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En ce qui concerne le blocage du bouton JOUER, nous allons coupler ces deux memes 
methodes avec la methode jQuery .attr( ), ce qui permet de changer la valeur de l'attribut 
di sabl ed de l'element dont l'identifiant est #button. 

I$( '#button' ) .ajaxStart(function(request, settings) { $(this).attr("disabled",true) }); 
$( '#button' ) .ajaxStop(function( request, settings)! $(this) .attrC'disabled", false) }); 

Pour que ces methodes soient appliquees aux elements concernes apres leur chargement, 
nous allons inserer ces 4 instructions dans le gestionnaire ready (qui detecte la fin du 
chargement des elements DOM de la page) deja cree pour le gestionnaire onclick du 
bouton JOUER. 

Code 14-27 : gestion de l'animation et du bouton avec jQuery : 

$(document).ready(function() { 

$('#button').click(function {jouerO;}); 
//gestion du bouton et de l'animation 

$C#button').ajaxStart(function(request, settings) { $(this). attrC'disabled", true) }); 
$C#button').ajaxStop(function(request, settings)) $(this).attrCdisabled", false) }); 
$C#charge').ajaxStart(function(request, settings) { $(this).css("visibility", "visible") }); 
$C#charge').ajaxStop(function(request, settings)) $(this).css("visibility", "hidden") }); 
}); 

Pour information, nous indiquons ci-dessous (code 14-28) les instructions placees dans 
les fonctions jouerO et actual iserPageO qui permettaient de gerer l'animation et le 
bouton avant d'utiliser jQuery. Nous vous invitons a comparer ces instructions avec celles 
du code 14-27 dans lequel nous avons utilise les methodes de la bibliotheque jQuery. 

Code 14-28 : gestion de l'animation et du bouton avant d'utiliser jQuery : 

function jouerO { 
objetXHR = creationXHRO; 

document. get Element By Id ("button" ) . di sabl ed= false; 

document. get Element By Id ("charge" ) .style. vi si bil ity=" hidden" ; 
} 
function actualiserPaget ) ( 

document. get Element By Id ("button" ) .di sabl ed= false; 
document. get Element By Id ("charge" ) .style. vi si bil ity=" hidden" ; 
} 

Les modifications du fichier fonctionsMachine.js sont maintenant terminees, vouspouvez 
l'enregistrer et passer a la phase de test du systeme. 



Test du systeme 



Ouvrez la page index.html dans le navigateur Firefox en appuyant sur la touche F12 de 
Dreamweaver. Le systeme doit se comporter comme celui de 1' atelier 11-1 hormis que 
cette fois le moteur Ajax fonctionne avec l'objet et les methodes jQuery que nous venons 
de mettre en place. 

Pour memoire, pour tester le systeme vous devez saisir votre nom et prenom dans les 
champs appropries puis cliquer sur le bouton JOUER. Des l'envoi de la requete, le 
bouton JOUER est bloque (il est alors grise) et l'animation apparait afin de vous signaler 
que le traitement est en cours. A la fin du traitement, le bouton JOUER doit retrouver son 
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apparence initiale, l'animation doit disparaitre et le message d'information rappelant 
votre nom et prenom et indiquant le montant de votre gain doit s'afficher. 

Atelier 14-2 : requete asynchrone POST et reponse au format 
JSON avec jQuery 

Composition du systeme 

Pour continuer notre comparatif entre les moteurs Ajax en JavaScript et en jQuery, nous 
allons maintenant reprendre le systeme de 1' atelier 12-3 dans lequel la reponse du serveur 
etait renvoyee au format JSON. 

Cette structure est composee : 

• d'une page HTML (index, html) dont la structure est identique a celle del' atelier 12-3 ; 

• du fichier de la bibliotheque jQuery (jquery.js) qui est identique a celui que nous 
avions telecharge dans 1' atelier 14-1 ; 

• d'un fichier JS (fonctionsMachine.js) qui contient les fonctions specifiques al'application 
Ajax de la machine a sous dont la structure de base avant modification est semblable a 
celle de 1' atelier 12-3 ; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celle de 
1' atelier 12-3 ; 

• d'une feuille de styles (style. ess) identique a celle de l'atelier 12-3 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du jeu est identique a celui de l'atelier 12-3 que nous allons prendre 
comme base de depart pour effectuer nos modifications. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 12-3 (index.html) et sauvegardez-la sous lememenom 
dans un nouveau repertoire nomme /chapl4/atelierl4-2/. Copiez ensuite les autres 
fichiers de l'atelier dans ce nouveau dossier ainsi que le fichier de la bibliotheque jQuery 
(jquery.js) qui est copie depuis le repertoire de l'atelier precedent. 

Ouvrez ensuite la page index.html et ajoutez une balise de script faisant reference a la 
bibliotheque jquery.js et supprimez la balise faisant reference au fichier fonctions- 
Ajax.js. 

<script src="jquery. js" type="text/javascript"X/script> 

Ouvrez ensuite le fichier fonctionsMachine.js et ajoutez la methode jQuery .click du 
bouton JOUER afin d'appeler la fonction jouer( ) lorsque le joueur clique sur ce bouton 
comme nous l'avons fait dans le precedent atelier. 

I $ (document) .ready (functionO { 
$( '//button' ) .click(function () {jouerO;}); 
}): 
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Localisez ensuite la fonction jouer( ) qui est appelee lors de l'envoi de la requete Ajax au 
serveur. Supprimez tout le contenu de cette fonction puis inserez l'appel de la methode 
Ajax dej Query. 

$.ajax({ ... }); 

Ajoutez ensuite a l'interieur des accolades de cette methode les options necessaires a la 
configuration de le requete. 

Les deux premieres options sont identiques a celles du moteur Ajax j Query de 1' atelier 
precedent. 

I type: 'POST', 
url : 'gainAleatoi re.php' , 

L' option suivante est data, elle contient les donnees au format d'URL a envoyer avec la 
requete. Dans cet atelier, comme nous envoyons uniquement au serveur le nom du joueur, 
nous n'avons besoin que de la valeur du champ nom. 

data: "nom="+ $('#nom').val (), 

Contrairement a 1' atelier precedent dans lequel nous avions receptionne les donnees du 
serveur au format Texte, cette fois-ci nous allons devoir indiquer explicitement le format 
JSON a l'aide de l'option dataType. 

dataType: 'json', 

Et enfin, les options success et error sont elles aussi, identiques a celles de l'atelier prece- 
dent. 

I success: actual iserPage, 
error: functionO {alert( 'Erreur serveur');} 

Une fois toutes les options parame trees, la fonction jouerO doit etre semblable au 
code 14-29 ci-dessous. 

Code 14-29 : Fonction jouerO : 

function jouerO { 

$.ajax({ 

type: 'POST', 

url: 'gainAleatoi re.php' , 

data: "nom="+ $( '#nom' ) .val ( ) , 

dataType: 'json', 

success: actual iserPage, 

error: functionO {alert( 'Erreur serveur');} 

}); 
} 

La fonction jouerO etant maintenant terminee, passons a la creation de la fonction de 
rappel actual iserPage( ). Commencez par supprimer le contenu de la fonction de rappel 
comme dans l'atelier precedent et ajoutez la reponse du serveur dans son argument. 

function actual iserPage(reponse) { 
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Gestion des objets et tableaux JavaScript avec la methode .eachQ 

La methode jQuery .eachO permet de recuperer les valeurs des attributs d'un objet JavaScript. Pour 
cela, il suffit d'indiquer le nom de I'objet dans le premier argument et la fonction qui permet de parcourir 
tous les attributs de I'objet dans le second argument de la methode. 
Par exemple, si nous desirons recuperer les deux attributs de I'objet ci-dessous : 

var objetJS=(nom: 'Def ranee' .prenom: ' Jean -Marie ' } 

II suffit de creer un objet jQuery et de configurer les arguments de sa methode .each( ) de la maniere 
suivante : 

$.each(objetJS, f unction(attribut.valeur) { 
consol e.info(attribut+' est egal a '+valeur); 

}); 

Cette commande affiche dans la console les lignes ci-dessous : 

nom est egal a Defrance 
prenom est egal a Jean-Marie 

A noter que cette meme methode .eachO peut aussi etre utilisee pour recuperer les donnees d'un 
tableau indice en JavaScript. La procedure est la meme que pour un objet hormis le fait que la fonction 
inseree dans le second argument n'a pas de parametre, les valeurs du tableau etant recuperees a I'aide 
de la cle this comme I'illustre I'exemple ci-dessous. 

var tableauJS = [ T. '2']; 
$.each(tableauJS, functionO { 
consol e.infot 'valeur='+this) ; 
}); 

Ce programme afficherait alors dans la console : 

valeur=l 
valeur=2 

Lutilisation conjointe de ces deux exploitations de la methode .eachO permet ainsi d'extraire les 
donnees d'un objet JSON quelle que soit sa structure. 



Pour memoire, I'objet JSON renvoye par le serveur a une structure semblable a celle du 
code 14-30 ci-dessous. 

Code 14-30 : exemple d' objet JSON renvoye par le serveur : 

I 1 

{" res ul tats" : {"nom" : "Defrance" ."gain": 90}} 

Comme vous pouvez le constater, I'objet JSON est compose de deux objets JavaScript. 
Nous allons done utiliser deux methodes jQuery .eachO imbriquees (voir l'encadre 
precedent) afin d'en extraire les donnees. 

Pour recuperer ces donnees, nous allons commencer par initialiser un tableau resultats 
qui contient les valeurs du gain et le nom du joueur. 

I function actual iserPage(reponse) { 
var resultats=new ArrayO; 
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La premiere methode permet d'acceder au premier objet resultats. 

I$.each(reponse, function(nomRes.res) { 
}): 

Avec la seconde boucle, nous pouvons ensuite memoriser les deux donnees nom et gain 
dans le tableau precedemment initialise. 

|$.each(res, function(attribut, valeur) { 
resultats[attribut]=valeur; 
}): 

Une fois les deux methodes .eachO configurees, il faut ensuite affecter les resultats 
memorises dans le tableau resultats[] aux deux zones dont les identitiants sont respecti- 
vement nom et gain. 

I$( '//resul tat' ) .html (resultats ["gain"]) ; 
$( '//gagnanf ) .html (resultats ["nom"]) ; 

Pour memoire, la structure du message d'information dans lequel nous venons d'integrer 
les nouveaux resultats est la suivante : 



° 



<di v id="info">Bravo, M <span id="gagnant"X/span> vous avez gagne 
<span id="resultat"X/span> Euros</div> 



Ce nouveau message d'information etant desormais pret, il ne nous reste plus qu'a l'affi- 
cher en changeant le style visibility avec la valeur visible comme nous l'avions deja 
fait dans 1' atelier precedent. 

Une fois terminee, la fonction actual i serPaget ) doit etre semblable au code 14-31. 

Code 14-31 : fonction actual iserPageO : 

function actualiserPage(reponse) { 
var resul tats=new ArrayO; 
$.each(reponse, function(nomRes.res) { 
$.each(res, functiontattribut, valeur) { 
resultats[attribut]=valeur; 
}); 
}); 

$( "#resul tat' ) .html (resul tats[ "gain"] ) ; 
$( '#gagnant ' ) .html (resul tats ["nom"]) ; 
//affiche la zone info 
$( '#info' ). ess ("visibility", "visible" ) ; 
} 

Comme dans 1' atelier precedent nous allons, ici aussi, gerer avec les methodes j Query 
ajaxStartO et ajaxStopO l'affichage de l'animation et le blocage du bouton JOUER 
pendant le temps de traitement de la requete Ajax. 

Code 14-32 : gestion de l'animation et du bouton avec jQuery : 

$(document).ready(function() { 

$('#button').click(function {jouerO;}); 
//gestion de l'animation et du bouton 

$( '//button' ).ajaxStart(function(request, settings) { $(this).attr("disabled",true) }); 
$( '//button' ).ajaxStop(function(request, settings)! $(this).attr("disabled", false) }); 
$( '//charge' ).ajaxStart(function(request, settings) { $(this).css("visibility", "visible") }); 
$( '//charge' ).ajaxStop(function(request, settings)! $(this).css("visibility", "hidden") }); 
}): 
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Les modifications dufichier f on ctionsMa chine, js sont maintenant terminees, vous pouvez 
l'enregistrer et passer a la phase de test du systeme. 

Test du systeme 

Ouvrez la page 1 ndex . html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Le systeme doit se comporter comme celui de 1' atelier 12-3 hormis que 
cette fois le moteur Ajax fonctionnera avec l'objet et les methodes j Query que nous 
venons de mettre en place. 

Atelier 14-3 : requete asynchrone POST et reponse au format 
XML avec jQuery 

Composition du systeme 

Pour continuer notre comparatif entre les moteurs Ajax en JavaScript et en jQuery, nous 
vous proposons maintenant de reprendre le systeme de 1' atelier 12-2 dans lequel la reponse 
du serveur etait renvoyee au format XML. 

Cette structure est composee : 

• d'une page HTML (index, html) dont la structure est identique a celle del' atelier 12-2 ; 

• du fichier de la bibliotheque jQuery (jquery.js) qui est identique a celui que nous 
avions telecharge dans 1' atelier 14-1 ; 

• d'un fichier JS (fonctionsMachine.js) qui contient les fonctions specifiques a 1' applica- 
tion Ajax de la machine a sous dont la structure de base avant modification est 
semblable a celle de 1' atelier 12-2 ; 

• d'un fichier serveur PHP (gainAleatoire.php) dont la base est identique a celle de 
1' atelier 12-2 ; 

• d'une feuille de styles (style. ess) identique a celle de l'atelier 12-2 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du jeu est identique a celui de l'atelier 12-2 que nous allons prendre 
comme base de depart pour effectuer nos modifications. 

Conception du systeme 

Ouvrez la page HTML de l'atelier 12-2 (i ndex . html ) et sauvegardez-la sous le meme nom 
dans un nouveau repertoire nomme /chapl4/atelierl4-3/. Copiez ensuite les autres 
fichiers de l'atelier dans ce nouveau dossier ainsi que le fichier de la bibliotheque jQuery 
(jquery.js) qui est copie depuis le repertoire de l'atelier precedent. 

Ouvrez ensuite la page index.html et ajoutez une balise de script faisant reference a la 
bibliotheque jquery.js et supprimez la balise faisant reference au fichier fonctions- 
Ajax.js. 

<script src="jquery. js" type="text/javascript"></script> 
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Ouvrez ensuite le fichier fonctionsMachine.js et ajoutez la methode jQuery .click du 
bouton JOUER afin d'appeler la fonction jouer( ) lorsque le joueur clique sur ce bouton, 
comme nous l'avons fait dans le precedent atelier. 

I $ (document) .ready (function( ) { 
$( '#button' ) .clickt function () {jouerO;}); 
}); 

Localisez ensuite la fonction jouer( ) qui est appelee lors de l'envoi de la requete Ajax au 
serveur. Supprimez tout le contenu de cette fonction puis inserez l'appel de la methode 
Ajax dej Query. 

$.ajax({ ... }); 

Ajoutez ensuite a l'interieur des accolades de cette methode les options necessaires a la 
configuration de le requete. Les trois premieres options seront identiques a celles du 
moteur Ajax j Query des ateliers precedents. 

I type: 'POST', 
url : 'gainAleatoi re.php' , 
data: "nom="+ $( '#nom' ) .val ( ), 

Contrairement a 1' atelier precedent dans lequel nous avions receptionne les donnees du 
serveur au format JSON, cette fois-ci nous allons devoir indiquer explicitement le format 
XML a l'aide de l'option dataType. 

dataType: 'xml ' , 

Et enfin, les options success et error sont elles aussi identiques a celles des ateliers prece- 
dents. 

I success: actual iserPage, 
error: functionO {alert( 'Erreur serveur');} 

Une fois toutes les options parametrees, la fonction jouerO doit etre semblable au 
code 14-33 ci-dessous : 

Code 14-33 : fonction jouerO : 

function jouerO { 

$.ajax({ 

type: 'POST', 

url: 'gainAleatoi re.php' , 

data: "nom="+ $( '#nom' ) .val ( ) , 

dataType: 'xml', 

success: actual iserPage, 

error: functionO {alert( 'Erreur serveur');} 

}); 
} 

La fonction jouerO etant maintenant terminee, passons a la creation de la fonction de 
rappel actual iserPageO. Commencez par supprimer le contenu de la fonction de rappel 
comme dans 1' atelier precedent et ajoutez la reponse du serveur dans son argument. 

function actual iserPage(reponse) { 
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Pour me moire, l'objet XML renvoye par le serve ur a une structure semblable a celle du 
code 14-34 ci-dessous. 

Code 14-34 : exemple d'objet XML renvoye par le serveur : 

<?xml version="1.0" encoding="utf-8"?> 
<resultats> 

<nom>Defrance</nom> 

<gain>74</gain> 
</resul tats> 

Comme vous pouvez le constater, l'objet XML est compose d'un nceud racine <resul- 
tats> et de deux noeuds enfants <nom> et <gain>. Pour recuperer les donnees des noeuds 
enfants nous allons utiliser une methode jQuery . find( ) couplee a la methode .text( ) 
pour recuperer le contenu de la balise trouvee. 

Si nous appliquons la methode .findO a 1' element du resultat renvoye par le serveur 
(reponse) en indiquant en parametre le nom du nceud enfant recherche, nos pouvons recu- 
perer le contenu du nceud ainsi cible et l'enregistrer dans une variable comme l'illustre la 
premiere ligne de code de la fonction ci-dessous. 

I function actual iserPage(reponse) { 
var gain=$( reponse ).find( 'gain') .textO ; 

Une fois la valeur memorisee dans la variable gain il sufht ensuite de l'affecter a la zone 
dont l'identifiant est resultat a l'aide de la methode html (). 

$('#resul tat'). html (gain); 

Pour recuperer le nom du joueur, la procedure est semblable hormis que dans ce cas, le 
nom du nceud recherche est nom et que sa valeur est ensuite affectee a la zone dont l'iden- 
tifiant est gagnant. 

I var gagnant=$( reponse) . f i nd( 'nom' ) .text( ) ; 
$( '#gagnant' ) .html (gagnant) ; 

Le nouveau message d' information etant desormais pret, il ne nous reste plus qu'a l'affi- 
cher en donnant au style visibility la valeur visible comme nous l'avions deja fait dans 
1' atelier precedent. 

$( '#info' ) .cssC'vi sibil ity" , "visible" ) ; 

Une fois terminee, la fonction actual iserPage( ) doit etre semblable au code 14-35. 

Code 14-35 : fonction actual iserPageO : 

function actual iserPage(reponse) { 

var gain=$( reponse) . find( 'gain' ) .text( ) ; 

$('#resultaf ).html (gain) ; 

var gagnant=$( reponse) .find( 'nom' ) .text( ) ; 

$( '#gagnanf ) .html (gagnant) ; 

//affiche la zone info 

$( '#info' ) .cssC'vi sibil ity" , "visible") ; 
} 

Comme dans 1' atelier precedent nous allons, ici aussi, gerer avec les methodes jQuery 
ajaxStartO et ajaxStopO l'affichage de l'animation et le blocage du bouton JOUER 
pendant le temps de traitement de la requete Ajax. 
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Gestion de document XML avec de multiples items 

Dans les documents XML, il est tres frequent d'avoir une structure composee de multiples items comme 
I'illustre I'exemple ci-dessous. 
<resultats> 
<gain>74</gain> 
<gain>23</gain> 
<gain>59</gain> 
</resul tats> 

Dans ce cas, vous devez exploiter une methode each( ) afin de parcourirtous les items du noeud racine. 
En guise d'exemple, voici un code qui permet de recuperer dans un tableau les differents gains du docu- 
ment ci-dessus. 

var resultat=new ArrayO 

S(reponse) . find ( 'gain' ) .each(function() ( 
resultat[]= $(this).text(); 

}); 



Code 14-36 : gestion de l'animation et du bouton avec jQuery : 

$(document).ready(function() { 

$('//button').click(function {jouerO;}); 
//gestion de l'animation et du bouton 

$( '//button' ).ajaxStart(function(request, settings) { $(this).attr("disabled",true) }); 
$( '//button' ).ajaxStop(function(request, settings)! $(this).attr("disabled", false) }); 
$( '//charge'). ajaxStart(function(request, settings) { $(this).css("visibility", "visible") }); 
$( '//charge' ).ajaxStop(function(request, settings)! $(this).css("visibility", "hidden") }); 
}): 

Les modifications du fichier fonctionsMachine.js sont maintenant terminees, vouspouvez 
l'enregistrer et passer a la phase de test du systeme. 



Test du systeme 



Ouvrez la page 1 ndex . html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Le systeme doit se comporter comme celui de 1' atelier 12-2 hormis que 
cette fois le moteur Ajax fonctionne avec l'objet et les methodes jQuery que nous venons 
de mettre en place. 



Atelier 14-4 : verification instantanee de la saisie dans une base 
de donnees avec jQuery 

Composition du systeme 

Pour cloturer notre comparatif entre les moteurs Ajax en JavaScript et en jQuery, nous 
vous proposons maintenant de realiser un systeme de verification de la saisie semblable a 
celui de l'atelier 13-1. Cela nous permet ainsi d'illustrer la gestion d'un evenement (en 
l'occurrence il s'agit de la saisie d'un nouveau caractere) avec l'objet et les methodes 
jQuery. 
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Cette structure est composee : 

• d'une page HTML (index, html) dont la structure est identique a celle del 'atelier 13-1 ; 

• du fichier de la bibliotheque jQuery (jquery.js) qui est identique a celui que nous 
avions telecharge dans 1' atelier 14-1 ; 

• d'un fichier JS (f oncti onsMachi ne . js) qui contient les fonctions specifiques a l'application 
Ajax de la machine a sous dont la structure de base avant modification est semblable a 
celle de 1' atelier 13-1 ; 

• d'un fichier serveur PHP (gainAleatoi re. php) identique a celui de l'atelier 13-1 ; 

• d'un fichier serveur PHP (nomVerifi cation. php) identique a celui de l'atelier 13-1 ; 

• d'un fichier de connexion a la base de donnees (connexionMysql .php) identique a celui 
de l'atelier 13-1 ; 

• d'une feuille de styles (style. ess) identique a celle de l'atelier 13-1 ; 

• d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du jeu est identique a celui de l'atelier 13-1 que nous allons prendre 
comme base de depart pour effectuer nos modifications. 

Conception du systeme 

Ouvrez la page HTML del' atelier 13-1 (index.html) et sauvegardez-la sous lememenom 
dans un nouveau repertoire nomme /chapl4/atelierl4-4/. Copiez ensuite les autres 
fichiers de l'atelier dans ce nouveau dossier ainsi que le fichier de la bibliotheque jQuery 
(jquery.js) qui est copie depuis le repertoire de l'atelier precedent. 

Ouvrez ensuite la page index.html et ajoutez une balise de script faisant reference a la 
bibliotheque jquery.js et supprimez la balise faisant reference au fichier fonctions- 
Ajax.js. 

<script src="jquery. js" type="text/javascript"></script> 

Ouvrez ensuite le fichier fonctionsMachine.js. Pour memoire, ce fichier comporte deux 
moteurs Ajax. Le premier permet d'envoyer une requete accompagnee du nom du joueur 
au fichier serveur gainAleatoi re. php afin de recuperer le montant du gain et le nom du 
gagnant. Le second, quant a lui, permet d'interroger la base de donnees via PHP et une 
requete Ajax declenchee a chaque nouvelle saisie d'un caractere dans le champ nom au 
fichier serveur nomVerifi cation, php afin de recuperer un etat indiquant si le nom est 
present ou pas dans la base. 

Pour le premier moteur, son adaptation en jQuery est semblable a celle que nous avons 
deja detaiilee dans l'atelier 14-1 (hormis que dans notre cas, seule la valeur du champ nom 
est envoyee en parametre de la requete Ajax). Nous nous contentons done de remplacer 
les fonctions jouerO et actual i serPage( ) par celles du fichier fonctionsMachine.js de 
l'atelier 14-1 et d'ajouter les gestionnaires du bouton et de l'animation (voir code 14-37). 
A noter que pour preparer le blocage du bouton par le second moteur nous avons place 
son instruction d'activation dans la fonction actual iserPageO (alors que nous avions 
utilise initialement une methode ajaxStop( ) dans le gestionnaire ready( )). 
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Code 14-37 : fonctions jouerO et actual iserPageO avecjQuery : 

function jouerO { 
$.ajax({ 

type: 'POST', 
url : 'gainAleatoire.php' , 
data: "nom="+ $('#nom').val(), 
dataType: 'text' , 
success: actualiserPage, 
error: functionO {alert( 'Erreur serveur');} 
}); 
} 
function actualiserPage(reponse) { 

var nouveauResultat = reponse.splitC':"); 
$('//resul tat"). html (nouveauResultat[l]); 
$( '//gagnant'hhtml (nouveauResultat[0]); 
$('#button').attr("disabled", false); 
$( '//info' ). ess ("visibility", "visible"); 
} 

$(document).ready(function() { 
$( '//button' ).click( function {jouerO;}); 
//gestion du bouton 

$( '//button' ).ajaxStart(function(request, settings) { $(this).attr("disabled",true) }); 
//gestion de 1 'animation 

$( '//charge' ).ajaxStart(function(request, settings) { $(this) . css( "visibility" , "visible") }); 
$( '//charge' ).ajaxStop(function(request, settings)! $(this).css("visibility", "hidden") }); 
0; 

Si vous le desirez, vous pouvez des maintenant tester le bon fonctionnement de ce 
premier moteur dans le navigateur avant de passer a la creation du second moteur (atten- 
tion dans ce cas a neutraliser les instructions du second moteur en les commentant ann 
d'eviter l'affichage d'erreurs lors de vos tests). 

Passons maintenant a la creation du second moteur. Commencons par mettre en place le 
gestionnaire . bind( ) qui assure la surveillance de la saisie d'un caractere dans le champ 

nom. 



$(document) .ready(function( ) { 
$('#nom').b1nd('keyup' . null, verifierNom) ; 



} 



Ce gestionnaire appelle ainsi la fonction verifierNomO a chaque nouveau caractere saisi 
dans le champ nom. La fonction verifierNomO receptionne done en parametre (event) 
l'evenement correspondant. 

I function verifierNom(event) 

Dans l'atelier 13-1, la requete Ajax utilisee pour assurer la verification de la saisie etait 
une requete GET. Aussi, pour ce second moteur j Query, nous allons utiliser le meme type 
de requete (nous devons done transmettre cette fois les parametres directement dans 
l'URL du serveur). 

Pour transmettre les parametres, nous allons commencer par les preparer dans une varia- 
ble cible. Les deux premieres lignes de la fonction de ce moteur permettent de construire 
cette URL en y inserant la valeur du champ nom (extraite de l'evenement event en utilisant 
les attributs .target. value). 
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function verifierNom(event) 
{ 

var cible ="nomVerification.php?"; 

cible +="nom="+ event. target. value; 

La creation et la configuration de l'objet jQuery Ajax est ensuite semblable a celles que 
nous avons deja realisees precedemment hormis le fait que le type est GET et que les 
parametres sont integres dans l'URL du serveur (grace a la variable d bl e). 

$.ajax({ 

type: 'GET', 
url : cible, 
dataType: 'text' , 
success: afficherReponse, 
error: functionO {alertt 'Erreur serveur');} 
}); } 

Une fois terminee, la fonction verifierNomO doit etre semblable aux instructions du 
code 14-38. 

Code 14-38 : fonction verifierNomO : 

function verifierNom(event) { 
var cible ="nonWerification.php?" ; 
cible +="nom="+ event. target. value; 
$.ajax({ 

type: 'GET', 
url : cible, 
dataType: 'text' , 
success: afficherReponse, 
error: functionO {alert( 'Erreur serveur');} 
}); } 

II nous reste maintenant la creation de la fonction de rappel afficherReponseO. Cette 
fonction doit receptionner la reponse du serveur et, selon sa valeur, afficher un message 
informant l'utilisateur qu'il a ete reconnu ou non. Si l'utilisateur est reconnu, nous 
devons aussi reactiver le bouton de sorte a ce qu'il puisse jouer. 

function afficherReponse(reponse) { 
if (reponse!=0) { 

... //util isateur reconnu 
}else{ 

... //util isateur inconnu 
} 
} 

Pour afficher le message nous allons utiliser une instruction jQuery qui affecte a la zone 
dont l'identifiant est message le texte correspondant au resultat du serveur a l'aide de la 
methode htmlO. Nous allons utiliser ensuite le principe des methodes en chaine de 
jQuery pour aj outer a cette meme instruction une autre methode ess ( ) qui permet de rendre 
le message visible et de l'afficher dans la couleur desiree (rouge si l'utilisateur est 
inconnu, vert sinon). 

I$( '//message' ) .html ("Joueur identifie").css({"visibil ity" 
**: "visible", "col or": "green"}); 
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Une seconde instruction permettant d'activer ou de desactiver le bouton JOUER accom- 
pagne chacune des deux alternatives de cette structure de choix. 

$('#button').attr("disabled". false); 

Une fois terminee, la fonction aff icherReponse( ) doit etre semblable au code 14-39 : 

Code 14-39 : fonction afficheReponseO : 

function afficherReponse(reponse) { 
if (reponse!=0) { 

$( '^message' ) .html ("Joueur identifie" ) .css( {"visibility" 
**: "visible" , "color" : "green"} ) ; 
$( '#button') . attr( "disabled", false) ; 
}else{ 
$( '//message' ) .html ("Joueur inconnu") . css({" visibility": "visible" ."color" : "red"}) ; 
$( '#button' ) .attr( "disabled", true); 
} 
} 

Les modifications du fichier fonctionsMachine. js sont maintenant terminees, vous pouvez 
l'enregistrer et passer a la phase de test du systeme. 



Test du systeme 



Ouvrez la page i ndex. html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Le systeme doit se comporter comme celui de 1' atelier 13-1 hormis que 
cette fois le moteur Ajax fonctionne avec les objets et methodes jQuery que nous venons 
de mettre en place. 



15 
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Ce dernier chapitre de la troisieme partie vient completer le chapitre 14 sur jQuery en vous 
presentant quelques exemples de plug-ins jQuery qui trouveront certainement une place 
dans vos futures applications. 

Les plug-ins jQuery sont des bibliotheques complementaires a la bibliotheque de base 
que nous avons utilisee dans le chapitre precedent. D' installation tres facile, ils vous 
permettront, en quelques lignes de code, de disposer d' applications avancees que vous 
pourrez personnaliser a votre guise. 

Mise en oeuvre dun plug-in jQuery 
Localisation des plug-ins jQuery 

La selection des 3 plug-ins jQuery presentes dans ce chapitre est evidemment tres loin 
d'etre exhaustive. Le but de ce chapitre est principalement de vous initier a la mise en 
oeuvre de quelques plug-ins afin que vous puissiez ensuite appliquer la meme procedure 
pour en installer d'autres selon les besoins de vos futures applications. 

Vous trouverez une liste consequente de plug-ins jQuery a l'adresse ci-dessous. Vous 
pourrez les classer selon leur famille (Ajax, Effets graphiques, Menus de navigation, 
Widget. . .), leur nom, leur date ou encore selon leur popularite. 

http://jquery. com/plugins/ 

Comment installer un plug-in jQuery ? 

L installation d'un plug-in jQuery est tres simple. Vous devez commencer par telecharger 
les ressources du plug-in jQuery sur votre ordinateur puis vous devez placer un ou plusieurs 
fichiers JavaScript et CSS dans un repertoire du site en cours de developpement. 

II faut ensuite ajouter des balises <scri pt> ou <1 i nk> pour referencer les ressources neces- 
saires dans la page sur laquelle vous desirez mettre en place 1' application (voir exemple 
ducode 15-1). Evidemment, le fichier de la bibliotheque de base jquery.js doit etre prea- 
lablement reference de la meme maniere dans cette meme page. 
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Code 15-1 : exemple de balises de reference a des fichiers JavaScript et CSS d'un plug-in 
jQuery : 

|<link rel="stylesheet" href="ui .tabs. ess" type="text/css" /> 
<script src="ui .tabs, js" type="text/javascript"X/script> 

Une fois les ressources disponibles dans la page, il ne vous reste plus qu'a creer un objet 
jQuery, en referencant 1' element qui accueille 1' application a mettre en place, pour 
ensuite lui appliquer une des methodes du plug-in jQuery (voir exemple du code 15-2). 

Code 15-2 : exemple d'appel d'une methode de plug-in jQuery : 

I$(document).ready(function() { 
$( '#menuOnglet ul').tabs({ remote: true }); 
}); 

Dans P exemple du code ci-dessus, le selecteur utilise (#menuOngl et ul ) fait reference aux 
balises <ul > enfants de P element portant Pidentifiant menuOngl et. L' application concernee 
(en Poccurrence ici, un menu a onglets) prend done place sur ces balises ainsi ciblees 
(voir exemple du code 15-3). 

Code 15-3 : exemple de balises qui supportent Papplication du plug-in jQuery : 

<div id="menuOnglet"> 
<ul> 
<1 iXa href="infoCss .html "Xspan>CSS</span></aX/l i> 
<li><a href="infoXml.html"Xspan>XML</spanX/aX/li> 
</ul> 
</div> 



Atelier 15-1 : plug-in UlTabs : menu a onglets 
Composition du systeme 

Ce plug-in permet de mettre en oeuvre un systeme de navigation dynamique par onglets. 
Dans notre exemple, le contenu de chaque onglet est stocke dans une page HTML speci- 
fique mais il pourrait tout aussi bien etre genere dynamiquement par un fichier PHP, si 
besoin. 
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Cette structure est composee : 

d'une page HTML (index.html) qui contient l'application ; 

du fichier de la bibliotheque de base jQuery (jquery. js) ; 

du fichier de la bibliotheque du plug-in UI Tabs (ui.tabs.js) ; 

du fichier de la feuille de styles du plug-in UI Tabs (u1 . tabs . ess) ; 

du fichier d'une feuille de styles complementaire pour le navigateur IE (u1 .tabs-ie.css) ; 

du fichier d'une feuille de style de personnalisation du contenu de chaque onglet qui 
est a definir selon la mise en forme desiree (styleContenu.css) ; 

d'un fichier element graphique pour la construction des onglets du menu (tab.png) ; 

d'un ensemble de 4 pages contenant le contenu (fragments de codes HTML) de chaque 
onglet (infoCss .html, infoXml .html , infoJavaScript.html, infoDom.html) ; 

d'une animation indiquant que le traitement est en cours (chargeur.gif). 

Fonctionnement du systeme 

Le fonctionnement du systeme de navigation est tres simple, des que l'utilisateur clique 
sur un des onglets du menu, la page HTML correspondante est chargee et les fragments 
de codes HTML qu'elle contient s'affichent dans la zone situee en dessous du menu. 

Chaque chargement de la page est signale par l'affichage d'une animation dans l'onglet. 
Des que le chargement d'une page est termine, la representation des onglets est modifiee 
afin d'indiquer quel est l'onglet actuellement actif. 

Conception du systeme 

Ouvrez une nouvelle page HTML et sauvegardez-la sous le nom index.html dans un 
nouveau repertoire nomme/chapl5/atelierl5-l/. 

Commencez par telecharger le fichier zip regroupant les differentes ressources sur le site 
de l'auteur (voir adresse ci-dessous). 

http://stilbuero.de/jquery/tabs/ 

Copiez ensuite les differents fichiers nommes dans la composition du systeme indiquee 
precedemment dans ce nouveau dossier. A noter que le kit de l'auteur contient un fichier 
de la bibliotheque de base, vous pouvez done utiliser ce fichier (dans ce cas renommez le 
jquery .js) ou recuperer celui que nous avons deja utilise dans les ateliers du chapitre 14. 

Ouvrez ensuite la page index.html et ajoutez une balise de script faisant reference a la 
bibliotheque jquery. js. 

<script src="jquery. js" type="text/javascript"X/script> 

Dans ce meme fichier, ajoutez ensuite une autre balise de script afin de referencer le 
plug-in ui .tabs. js. 

<script src="ui .tabs, js" type="text/javascript"X/script> 

Puis ajoutez trois liens link pour pouvoir disposer des feuilles de styles CSS du plug-in 
(ui. tabs. ess) et son complement pour le navigateur Internet Explorer (ui. tabs-ie.css) 
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ainsi que de la feuille de styles personnalisee (styleContenu.css) qu'il convient de creer 
specialement pour mettre en forme le contenu de chaque onglet. 

Ouvrez ensuite une balise <scri pt> et inserez un gestionnaire . ready ( ) arm de detecter le 
chargement complet des elements du DOM. 

Code 15-4 : gestionnaire de test du chargement du DOM : 

<script type="text/javascript"> 
$(document) . ready (functi on ( ) { 

}); 
</script> 

Ajoutez a l'interieur une instruction qui permet de creer un objet jQuery selectionnant les 
balises avec lesquelles l'application va etre reliee. Dans notre cas, le selecteur de l'objet 
reference la (ou les) balise(s) <ul > enfant(s) de l'element dont l'identifiant est memoOngl et. 

Code 15-5 : ajout de l'instanciation de l'objet j Query : 

<script type="text/javascript"> 
$(document) .ready(function( ) { 
$( '#menuOnglet ul '); 
}); 
</script> 

Appliquez ensuite la methode tabs( ) du plug-in jQuery a l'objet selecteur precedemment 
configure. Cette methode possedant plusieurs options de configuration, nous allons utili- 
ser dans notre exemple l'option cache qui permet de bloquer la mise en memoire des 
donnees. 

Code 15-6 : ajout de l'appel de la methode tabs( ) : 

<script type="text/javascript"> 
$(document) .ready(function( ) { 
$( '#menuOnglet ul').tabs({ cache: true }); 
}); 
</script> 

Pour terminer la configuration de la page i ndex. html , il faut maintenant creer les balises 
sur lesquelles le plug-in jQuery va s'appliquer. Pour cela, placez-vous dans la balise body 
de la page et ajoutez une balise div, son id etant configure avec la valeur menuOngl et. 

Code 15-7 : creation de la zone d'affichage du menu : 

|<div id="menuOnglet"> 
</div>; 

Inserez ensuite a l'interieur de cette balise une structure de listes non ordonnees (balise 
<ul >). Le menu comportera autant d'onglets qu'il y a de balises <1 i> dans cette structure. 
Dans notre exemple, nous allons ajouter 4 balises <li> arm de creer le meme nombre 
d'onglets. 

Code 15-8 : ajout des balises <1 i> : 

<div id="menuOnglet"> 
<ul> 
<li>...</li> 
<li>...</li> 
<li >_.</! i> 
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|<li>_</li> 
</ul> 
</div>; 

Ajoutez a l'interieur de chaque balise <li> le nom qui apparait sur l'onglet. Encadrez 
ensuite ce nom par un lien hypertexte qui pointe sur le fichier contenant les fragments 
HTML du contenu de l'onglet concerne. 

Code 15-9 : integration des informations des 4 onglets : 

<div id="menuOnglet"> 
<ul> 

<li><a href ="i nfoCss.html" Xspan>CSS</spanX/aX/li> 
<li><a href ="1 nfoJavascript.html" Xspan>OavaScript</spanX/aX/l i> 
<li><a href="infoDom.html" Xspan>DOM</spanX/aX/li> 
<li><a href ="i nfoXml.html" Xspan>XML</spanX/aX/li> 
</ul> 
</div>; 

Les modifications du fichier index.html sont maintenant terminees, vous pouvez l'enre- 
gistrer et passer a la creation de la feuille de styles dediee a la mise en forme du contenu. 
Celle-ci peut etre personnalisee selon les contenus mis dans chaque onglet. Nous vous 
proposons ci-dessous quelques styles tres simples pour creer ce fichier en guise d'exemple. 

Code 15-10 : creation de la feuille de styles styleContenu.css : 

body { 

font-size: 16px; 

font-family: Verdana, Helvetica, Arial, sans-serif; 
} 
hi { 

margin: lem 1.5em; 

font-size: 18px; 



margin: 0; 
font-size: 12px; 
} 

Enregistrez ce fichier sous le nom styleContenu.css avant de passer aux tests du systeme 
dans le navigateur. 



Test du systeme 



Ouvrez la page 1 ndex . html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Le systeme doit afficher le menu avec ses 4 onglets. Si la structure de la 
liste s'affiche sans mise en forme, verifier la presence des differents fichiers JavaScript et 
CSS indiques precedemment ainsi que la configuration des differents liens qui les refe- 
rencent dans la page 1 ndex . html . 

Le premier onglet nomme CSS doit etre ouvert par defaut. Cliquez ensuite sur l'onglet de 
votre choix. Lanimation chargeur.gif doit apparaitre dans l'onglet pendant le temps du 
chargement de la page de l'onglet selectionne. Des que le chargement est termine, le 
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contenu doit s'afficher dans la zone d'affichage et le menu doit changer d'apparence pour 
indiquer l'onglet actuellement selectionne (voir figure 15-2). 

Index des technologies Ajax 

CSS I JavaScript | DOM XML ) 

Definition du XML 

XML est I'aoronyme de eXentible Markup Language. Comme le HTML, !e XML est une norme SGML (Standard Generalized 

Markup Language) mais elle a et6 developpee blert plus tard fen 1998 alors que le HTML etait deFinl par le consortium 

W3C depuis 1990), 

Un document XML se caracterise par le fait qu'il contient uniquement des donnees structurees, sans aucune indication 

quant a leur presentation. Ainsl, si vous ouvrez un document XML dans un navlgateur, II n'affiche que la structure des 

donnees sous Forme d'arboresoence. XML est done partioulierement bien adapte pour structure^ enregistrer et 

transmettre des donnees. 

Le XML est aussi un langage qui utilise des balises non prtdefinls pour structurer un document, contratrement au HTML 

pour lequel I'usage de balises standards est obligatoire (<head>, <body>, <p>, .,.). 

Figure 15-2 

Test du plug-in UI Tabs : menu a onglets dynamiques 

Atelier 15-2 : plug-in jQuery.Suggest : Autosuggestion 
Composition du systeme 

Ce plug-in permet de mettre en oeuvre un systeme d' autosuggestion semblable a celui de 
Google Suggest (revoir la presentation de cette application dans le chapitre 2). Pour la 
demonstration nous allons utiliser un simple champ de saisie en dessous duquel vont 
s'afficher les differentes suggestions du serveur selon les caracteres saisis (affichage de la 
liste a partir de 2 caracteres). Cote serveur, nous allons utiliser un tableau associatif pour 
stocker les donnees qui font l'objet d'une recherche, mais il vous sera tres facile par la 
suite d'adapter ce systeme a des informations issues d'une base de donnees. 

Cette structure est composee : 

• d'une page HTML (index.html) qui contient l'application ; 

• du fichier de la bibliotheque de base jQuery (jquery . js) ; 

• du fichier de la bibliotheque du plug-in j Query. suggest (jquery .suggest, js) ; 

• du fichier de la feuille de styles du plug-in jQuery.suggest (jquery .suggest. ess) ; 

• du fichier serveur PHP propose dans la demonstration de l'auteur (search. php); 

• du fichier d'une feuille de styles de personnalisation du contenu de la page de votre 
application qui est a definir selon la mise en forme desiree (sty 1 eContenu . ess). 

Fonctionnement du systeme 

Si vous saisissez au moins deux caracteres dans le champ de saisie de l'application, une 
requete Ajax est envoyee afin de recuperer toutes les donnees du serveur contenant la 
chaine de caracteres saisie. Cette liste s'affiche en dessous du champ et il vous est facile 
de selectionner la valeur desiree dans les suggestions proposees. 

Pour simuler la selection, une boite d'alerte affiche la donnee choisie des que vous avez 
clique sur une des suggestions de la liste. 
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Conception du systeme 

Ouvrez une nouvelle page HTML et sauvegardez-la sous le nom index.html dans un 
nouveau repertoire nomme/chapl5/atelierl5-2/. 

Telechargez ensuite le fichier zip regroupant les differentes ressources sur le site de 
l'auteur (cliquez sur le lien Download de la derniere version de la bibliotheque a 
l'adresse ci-dessous). 

http://jquery.com/plugins/project/suggest/ 

Copiez ensuite dans ce nouveau dossier les differents fichiers composant le systeme. A 
noter que le kit de l'auteur contient un fichier de la bibliotheque de base, vous pouvez 
done utiliser ce fichier (dans ce cas renommez-le jquery . js) ou recuperer celui que nous 
avons deja utilise dans les ateliers du chapitre 14. 

Ouvrez la page index.html pour y aj outer 2 liens link afinde pou voir disposer desfeuilles 
de styles CSS du plug-in (jquery. suggest. ess) ainsi que de la feuille de styles personna- 
lisee (styleContenu.css) qu'il convient de creer specialement pour positionner et mettre 
en forme le contenu de la page de 1' application. 

Ajoutez ensuite une balise de script faisant reference a la bibliotheque de base j query, js. 

<script src="jquery. js" type="text/javascript"></script> 

En dessous de cette balise de scri pt, ajoutez-en une seconde afin de referencer le plug-in 

jquery .suggest. js. 

<script src=" jquery. suggest. js" type="text/javascript"X/script> 

Avant de developper le code qui appelle la bibliotheque que nous venons de mettre en place, 
cliquez sur le lien de la documentation proposee sur la page d'accueil de l'auteur (voir 
adresse indiquee precedemment). Depuis cette page, vous pouvez trouver un exemple de 
script pour exploiter rapidement la bibliotheque dont nous allons nous inspirer. A noter qu'en 
dessous de ce script, vous pouvez aussi telecharger, dans le repertoire de votre atelier, le 
fichier serveur search . php utilise dans la demonstration en ligne du systeme (hen « source »). 

Dans la page index.html, creez une balise <script> pour y inserer un gestionnaire 
. ready ( ) afin de detecter le chargement complet des elements du DOM. 

Code 15-1 1 : ajout du gestionnaire de test du chargement du DOM : 

<script type="text/javascript"> 
$(document) . ready (functi on () { 

}); 

</script> 

Depuis la page de la documentation, copiez les 2 lignes de code de l'objet j Query 
Suggest puis collez-les a l'interieur du gestionnaire . ready ( ) (voir code 15-12). 

Code 15-12 : ajout du script de creation de l'objet jQuery : 

<script type="text/javascript"> 
$(document) .ready (functi on () { 
jQuery("#suggest") .suggest ("search. php", { 
onSelect: functionO 
{alertC'Votre selection est : " + this. value)} 
}); 
}); 
</script> 
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Ces lignes de code permettent de creer un objet jQuery selectionnant le champ de saisie 
que nous allons utiliser (champ dont le id est suggest) et de lui appliquer la methode 
.suggest( ) de la bibliotheque jquery. suggest, js. 

Dans les arguments de cette methode, nous devons designer le fichier serveur qui est 
destinataire de la requete Ajax, soit search . php (attention de ne pas ecrire son chemin si le 
nchier se trouve dans le meme repertoire) suivi d'un gestionnaire onSel ect qui declenche 
pour nos tests une boite d'alerte lors de la selection d'une des suggestions. 

Placez-vous dans la balise <body> et ajoutez une structure de page afin de contenir le 
champ de recherche du formulaire. 

Code 15-13 : creation d'une structure de page : 

<div id="page"> 

<h2>Autosuggestion jQuery</h2> 
<!--zone du formulai re--> 
<div id="formulaire"> 

</div> 
</div> 

Placez-vous ensuite a l'interieur de la balise <div> dont l'identifiant est formulaire et 
ajoutez les balises du formulaire et du champ de saisie. 

Code 15-14 : Ajout des balises du formulaire et de son champ de saisie : 

<form> 
Saisissez votre cle de recherche : 
<input id="suggest" size="30" /> 

</form> 

A noter que l'attribut id du champ de saisie doit etre configure avec le nom suggest de 
sorte a ce qu'il puisse etre selectionne par l'objet jQuery du code 15-12. 

Les modifications du fichier index.html sont maintenant terminees, vous pouvez l'enre- 
gistrer et passer a la creation de la feuille de styles dediee au positionnement des 
elements et a la mise en forme de la page de 1' application. Nous vous proposons ci- 
dessous quelques styles tres simples pour creer ce fichier en guise d'exemple. 

Code 15-15 : styles de la page de 1' application : 

body { 

font-size: 16px; 

font-family: Verdana, Helvetica, Arit 
} 
hi { 

margin: lem 1.5em; 

font-size: 18px; 
} 
P ( 

margin: 0; 

font-size: 12px; 
} 
#page { 

position: relative; 

margin: auto; 

width :600px; 

height:200px; 



sans-serif; 
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border-top: medium solid #ff0000; 

border-bottom: medium solid #f fOOOO; 
} 
#formulaire { 

position: absolute; 

left: 38px; 

top: 103px; 

width: 532px; 
} 

Enregistrez ce fichier sous le nom styleContenu.css et assurez-vous que les styles sont 
bien appliques a la page i ndex. html en l'ouvrant dans un navigateur. 

Cote serveur, nous allons utiliser le fichier propose par l'auteur du plug-in (vous pouvez 
le telecharger sur son site ou le ressaisir dans votre editeur en vous inspirant du code 15-16). 
Nous vous proposons cependant ci-dessous de detailler son fonctionnement afin que 
vous puissiez eventuellement le modifier pour 1' adapter a votre application. 

Ce fichier est tres simple, il recupere le mot de recherche envoy e par le moteur Ajax 
(grace a la variable HTTP $_GET['q']), lui applique une fonction strtolowerO pour 
convertir tous ses caracteres en minuscules puis effectue une recherche de ce resultat 
dans toutes les cles du tableau associatif litems. A noter qu'une structure de test if ( !$q) 
est ajoutee avant le traitement afin d'eviter la generation d'un message d'erreur au cas ou 
le fichier search. php serait appele sans parametre d'URL. 

Code 15-16 : programme du fichier serveur search. php : 

$q = strtolower($_GET["q"]); 

if (!$q) return; 

//declaration et initialisation du tableau des donnees 

$items = arrayt 

"Great Bittern"=>"Botaurus stellaris", 

"Heuglin's Gull "=>"l_arus heuglini" 

); 

//recherche du mot dans les cles dans le tableau 

foreach ($items as $key=>$value) { 

if (strpos(strtolower($key) , $q) !== false) { 
echo "$key |$value\n" ; 

} 
} 

La structure du systeme de recherche s'appuie sur une boucle foreachO qui parcourt 
toutes les cles des donnees du tableau (Skey). Des que le mot recherche ($q) est detecte (a 
l'aide de la fonction strpos( )) dans la cle en cours, la condition du test if ( ) renvoie true, 
ce qui declenche l'affichage de la cle et de la valeur correspondante en retour (ces deux 
valeurs sont separees par le symbole « | », soit $key | $val ue). 

Les donnees utilisees pour nos tests sont les memes que celles du site de demonstration 
de l'auteur mais vous pouvez evidemment les remplacer facilement par celles de votre 
application ou, mieux, coupler ce systeme avec des resultats issus d'une requete SQL. 

Enregistrez maintenant le fichier search. php et passez aux tests du systeme dans le navi- 
gateur. 
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Test du systeme 



Ouvrez la page i ndex. html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Le navigateur doit afficher le champ de saisie vide. Saisissez une premiere 
lettre (« a » par exemple) puis une seconde (« b » par exemple). Une requete Ajax est 
alors envoyee au serveur et les donnees retournees dans sa reponse s'affichent dans une 
liste placee en dessous du champ de saisie (voir le haut de la figure 15-3). En vous inspi- 
rant des suggestions, continuez votre saisie pour affiner votre recherche. Des que le 
nombre de suggestions vous permet de faire votre choix sans ambiguite, cliquez sur l'une 
des options pour la selectionner. Une boite d'alerte doit alors s'afficher vous rappelant le 
choix effectue (voir le bas de la figure 15-3). 



Figure 15-3 

Test du plug-in 
jQuery.suggest : 
champ de saisie 
avec autosuggestion 



Autosuggestion jQuery 



Saisissez votre cle de recherche : 



Autosuggestion jQuery 



1 



Crab-PloverlDromas arde ola 

^gj^irie's &jll|Larus s^J5^ 
^ociaBie Ldpwiny|Vdiie!lijs gregarius 
Isabelline Wheatear|Oenanthe isabellina 



Saisissez votre cle de recherche : Sabine's GulllLorussabini 



La pag,e sur htfp: //Local hasl dit : 




Atelier 15-3 : plug-in jQuery.calendar : widget calendrier 
Composition du systeme 

Contrairement aux plug-ins des deux premiers ateliers, qui integraient un moteur Ajax 
jQuery, celui-ci est autonome et permet simplement de renseigner le champ « date » d'un 
formulaire a partir d'un petit widget calendrier. 

Cette structure est composee : 

• d'une page HTML (index.html) qui contient l'application ; 

• du fichier de la bibliotheque de base jQuery (jquery . js) ; 

• du fichier de la bibliotheque du plug-in jQuery.calendar (jquery- calendar, js) ; 

• du fichier de la feuille de styles du plug-in jQuery.calendar (jquery-calendar.css) ; 

• du fichier d'une feuille de styles de personnalisation du contenu de la page de votre 
application qui est a definir selon la mise en forme desiree (sty 1 eContenu . ess). 



Plug-ins jQuery 



Chapitre 15 

Fonctionnement du systeme 

Ce plug-in peut avantageusement etre integre dans un formulaire de reservation ou tout 
autre formulaire pour lequel l'utilisateur devra etre assiste dans le choix d'une date valide 
dans un format normalise. 

Des que l'utilisateur place son pointeur a l'interieur du champ, l'evenement est detecte et 
le widget calendrier apparait en dessous du champ. L'utilisateur peut alors passer d'un 
mois a l'autre, voire d'une annee a l'autre, afin de selectionner la date desiree dans un 
mini calendrier. Une fois la date selectionnee, le calendrier disparait et la date choisie est 
memorisee dans un format normalise (par exemple : 20/10/2007) dans le champ de 
saisie. 

Conception du systeme 

Ouvrez une nouvelle page HTML et sauvegardez-la sous le nom index.html dans un 
nouveau repertoire nomme/chapl5/atelierl5-3/. 

Rendez-vous ensuite sur le site de l'auteur a adresse ci-dessous. 

http://jquery.com/plugins/project/jquery-calendar/ 

Depuis cette page, cliquez sur le lien « View the jQuery Calendar Project Page ». Dans le 
nouvel ecran, deux liens differents vous permettent de telecharger la bibliotheque 
(jquery-calendar.js) et la feuille de styles du plug-in (jquery-calendar.css) sur votre 
ordinateur. Dans le has de 1' ecran, dans la rubrique Location packages, cliquez sur le lien 
French. Le code source d'un script de localisation en francais doit alors apparaitre a 
l'ecran. Copiez ce code puis collez-le dans une balise <script> de la page index.html. 

Code 15-17 : script a integrer dans la page index.html : 

<script type="text/javascript"> 

/* French initialisation for the jQuery calendar extension. */ 
/* Written by Keith Wood (kbwood@iprimus.com.au). */ 
$( document) . ready (functi on (){ 

popUpCal .regional ['fr'] = { 

clearText: 'Effacer', 

closeText: 'Fermer', 

prevText: '<Prec', 

nextText: 'Proch>', 

currentText: 'En cours', 

day Names: ['Di ' , ' Lu' , 'Ma' , 'Me' , ' Je' , 'Ve' , 'Sa'] , 

monthNames: ['Janvier',' Fevrier' , 'Mars' , 'Avril ' , 'Mai ' , ' Juin' , ' Juil let' , 'AoQf , 
^'Septembre' , 'Octobre' , 'Novembre' , 'Decembre']} ; 

popUpCal . setDefaultstpopllpCal . regional ['fr']) ; 
}); 
</script> 

Comme vous pouvez le remarquer, ce code est deja conditionne par un gestionnaire 
. ready () et contient les differentes traductions des liens texte et autres informations du 
widget qui vous permettent de personnaliser votre calendrier en francais. 

Placez-vous avant 1' accolade de fermeture du gestionnaire et ajoutez maintenant l'instan- 
ciation d'un objet jQuery avec selection du champ date auquel nous allons appliquer la 
methode calendarO dela bibliotheque. 
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Code 15-18 : affectation de la mefhode cal endar( ) a la balise date : 
<script type="text/javascript"> 

$('#date').calendar(); 

}); 
</script> 

Copiez ensuite, dans le repertoire de votre atelier, les fichiers de la bibliotheque de base 
jquery.js et styleContenu.css que nous avons deja utilises dans les ateliers precedents. 
Puis, en haut de la page index.html, ajouter 2 liens link afin de pouvoir disposer des 
feuilles de styles CSS du plug-in (jquery-calendar.css) ainsi que de la feuille de styles 
personnalisee de la page (styleContenu.css). 

Ajoutez ensuite une balise de sen' pt faisant reference a la bibliotheque de base j query . js. 

<script src="jquery. js" type="text/javascript"></script> 

En dessous de cette balise de scri pt, ajoutez-en une seconde afin de referencer le plug-in 

jquery-calendar. js. 

<script src="jquery-calendar. js" type="text/javascript"X/script> 

Placez-vous maintenant dans la balise <body> et ajoutez une structure de page afin de 
contenir le champ de recherche du formulaire. 

Code 15-19 : creation d'une structure de page : 

<div id="page"> 
<h2>jQuery.Calendar</h2> 
<!--zone du formul aire--> 
<div id="formulaire"> 

</div> 
</div> 

Placez-vous ensuite a l'interieur de la balise <div> dont l'identifiant est formulaire et 
ajoutez les balises du formulaire et du champ de saisie. 

Code 15-20 : ajout des balises du formulaire et de son champ de saisie : 

<form> 
Saisissez votre cle de recherche : 
<input type="text" name="date" id="date" /> 

</form> 

A noter que 1' attribut i d du champ de saisie devra etre configure avec le nom date de sorte 
a ce qu'il puisse etre selectionne par l'objet jQuery du code 15-18. 

Les modifications du fichier index.html sont maintenant terminees, vous pouvez l'enre- 
gistrer et passer aux tests du systeme dans le navigateur. 



Test du systeme 



Ouvrez la page i ndex. html dans le navigateur Firefox en appuyant sur la touche F12 dans 
Dreamweaver. Le navigateur doit afficher le champ de saisie vide. Placez votre pointeur 
a l'interieur du champ. Le calendrier doit alors apparaitre en dessous du champ. Parcou- 
rez si besoin les differents mois ou annees disponibles a l'aide des fleches Precedent et 
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Suivant ou, plus directement, a l'aide des menus deroulants. Arretez votre choix sur une 
date et cliquez dans la case correspondante dans le calendrier. Le calendrier doit alors 
disparaitre et la date doit etre memorisee au format standard dans le champ de saisie. 



Figure 15-4 

Test du plug-in 
j Query, calendar : 
widget calendrier 



jQuery. Calendar 
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Ressources 

sur les technologies 

associees 



Cette partie comporte plusieurs chapitres dedies aux differentes technologies utilisees 
dans les applications Aj ax-PHP. Vous pourrez ainsi vous y reporter ponctuellement 
pour trouver des complements d' information lors de la realisation des ateliers de la 
partie III de cet ouvrage, mais vous pouvez aussi les parcourir independamment du 
reste de l'ouvrage pour vous initier ou parfaire vos connaissances sur l'une de ces 
technologies. 
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XHTML 



HTML permettait initialement de structurer et de mettre en forme une page Web. Avec le 
XHTML, sa presentation est maintenant geree par les feuilles de style CSS, cette evolu- 
tion permet desormais de scinder parfaitement la structure de la forme des pages Web 
afin qu'elles soient plus facilement traitees par des applications ou des peripheriques 
differents sans pour autant necessiter de creer autant de versions de la page que Ton 
necessite de representations. 



Du HTML au XHTML 

La tendance du HTML etant d'evoluer progressivement vers le XML, une evolution du 
HTML conforme aux contraintes du XML a ainsi ete creee, il s'agit du XHTML. Meme 
si le XHTML est considere comme le successeur du HTML, il n'est pas issu du HTML 
mais du XML dont il herite de ses specificites. 



Les versions du XHTML 

Les premieres specifications du XHTML ont vus le jour en 2000 sous I'appellation XHTML 1 .0. Un an plus 
tard, elle fut remplacee par la version 1.1. La version 2.0 est actuellement a I'etude par le W3C mais n'a 
pas encore ete publiee. 



Les contraintes du XHTML 

En effet le HTML n' etant pas compatible avec le XML, il a done fallu creer un nouveau 
langage derive du XML, mais conservant les principes fondamentaux du HTML. Le 
XHTML n'a done pas la meme tolerance que le HTML et il faudra veiller a respecter 
les contraintes de balisage enumerees ci-apres : 

• Toujours cloturer une balise ouvrante par une balise fermante (le nom de la balise 
fermante etant le meme que celui de la balise ouvrante mais precedee du symbole "/"). 

<p>Bonjour tout le monde</p> 
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• Si une balise n' a pas de contenu, il n'y aura pas de balise fermante mais le symbole ">" 
de la balise ouvrante devra etre precede du symbole "/". 

<br /> 

• Toujours mettre le nom des balises et des attributs en minuscules. 

| <a href="monFichier.php" >Cliquez-moi</a> 

• Les attributs doivent toujours avoir une valeur et cette valeur doit toujours etre encadree 
par des guillemets simples ou doubles. 

<option value="fr" selected="selected">France</option> 

Composition d'un element HTML 

II est important de bien identifier les composants d'un element XHTML car nous les 
utiliserons a maintes reprises par la suite lors de l'utilisation des attributs et des methodes 
du DOM. 

Un element HTML est delimite par la balise ouvrante et fermante (voir repere 1 de la 
figure 16-1). II est compose de : 

• son (ou ses) attribut(s) place(s) dans la balise ouvrante (voir repere 2 de la figure 16-1). 

• son contenu place entre la balise ouvrante et la balise fermante (voir repere 3 de la 
figure 16-1). 



Figure 16-1 

Composition 
d'un element. 
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<a hre1=" maPage.html" > Clic ici </a> 
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Les balises neutres <div> et <sp»n> 

Le HTML met a notre disposition un grand nombre de balises et il serait trop long de toutes les detainer 
dans cet ouvrage. Cependant, dans les applications Ajax, nous aurons tres frequemment I'occasion 
d'interagir avec les balises de contenu usuelles du XHTML (<hl>, <p>, ...) et plus particulierement avec 
les balises neutres <div> et <span>. 

Les balises <di v> et <span> ont ete creees pour faciliter I'usage des feuilles de styles au sein des pages 
HTML afin de rendre plus souple I'application d'un style a une partie precise de la page. Contrairement 
aux autres balises HTML de contenu (<hl>, <p>, ...) qui impliquent une mise en forme par defaut, les 
balises <di v> et <span> sont des balises generiques (pas de formatage par defaut) et seront done souvent 
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liees a un style par le biais d'une class ou d'un id. Le fait d'associer un identifiant id a ces balises 
permettra aussi de les manipuler avec du code JavaScript ce qui explique leur usage tres frequent dans 
les applications Ajax. 

La balise <di v> est de type bl ock tout comme certaines balises traditionnelles du HTML (<p>, <tabl e>, 
<hl>, <l i >,...) et peut contenir un simple texte mais aussi d'autres elements conteneurs permettant ainsi 
de leur appliquer son style par heritage. Elle permet ainsi de diviser (d'ou le nom de la balise : <di v>) une 
page HTML en differents blocs structured. II est possible de mettre tout type d'elements HTML a I'interieur 
d'une balise <div> : images, tableaux, paragraphes, autres balises <div>. A noter enfin, que I'utilisa- 
tion d'une balise <di v> entraine un retour a la ligne obligatoire avant et apres le bloc qu'elle delimite. 
Dans I'exemple ci-dessous la balise <div> dont le id est page contient deux autres elements <hl> et 
<p> qui heriteront de son style (voir code 16-2). 
Code 16-1 : 

<div id="page"> 

<hl>Bonjour</hl> 

<p>Bravo, vous avez gagne 65 euros</p> 
</div> 

La balise <span>, quant a elle, est de type inline, comme les balises <a>, <input>, <i>, <b>, etcdu 
HTML traditionnel. Elle ne delimite pas un bloc structurel mais une zone a I'interieur d'une balise de 
contenu et permet ainsi d'appliquer un style specifique a une chaine de caracteres. Evidemment, aucun 
retour a la ligne ne sera genere avec une balise <span> puisqu'elle sera inseree directement dans la ligne 
d'un texte (type inline). 

Dans I'exemple ci-dessous, la balise <span> delimite une zone dans laquelle sera place le resultat du gain 
afin de lui appliquer un style particulier (grace a 1*1 d resul tat) pour mettre sa valeur en evidence. 
Code 16-2: 

Bravo, vous avez gagne <span id="resultat">0</span> euros 



Structure d'un document XHTML 
La declaration XML 

La premiere ligne du code permet d'indiquer que le document appartient a la famille 
XML 1.0 et qu'il doit etre bien forme tout comme un document XML dont il est issu (la 
declaration XML reste cependant facultative et peut meme engendrer des erreurs sur 
certains navigateurs anciens). 

Code 16-3 : 

<?xml version="1.0"?> 



Le DOCTYPE 



Pour qu'un navigateur interprete correctement le code d'une page XHTML 1.0, il faut 
preciser le DOCTYPE qu'il doit utiliser pour sa validation. En effet, le fichier DTD du 
DOCTYPE auquel il se refere contient toutes les contraintes auxquelles doivent se 
conformer les elements et attributs de la page Web. Ainsi, l'utilisation d'une balise non 
decrite dans le fichier DTD est interdite. 

Si le DOCTYPE est bien renseigne et les codes XHTML et feuilles de style CSS sont 
elabores selon les normes de la specification du DOCTYPE choisi, la page sera interpre- 
ted correctement par la majorite des navigateurs actuels. Dans le cas contraire, si le 
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DOCTYPE n'est pas renseigne, le navigateur tentera de se comporter comme un ancien 
navigateur et parcourra la page en mode Quirks (en considerant qu'il s'agit d'une 
ancienne page HTML 4) avec les risques de resultats imprevisibles que cela comporte. 

Les deux specifications DOCTYPE les plus employees actuellement sont les DTD strict 
et transitional. 

Si vous utilisez la balise de declaration d'un DOCTYPE strict, le navigateur effectuera 
une interpretation tres rigoureuse des elements HTML et de leurs regies d' imbrication, 
alors qu'avec le DOCTYPE transitional la validation sera plus permissive et acceptera 
plus facilement certaines entraves aux specifications XHTML. 

Par exemple, avec le DOCTYPE strict vous ne pouvez pas utiliser les attributs de presen- 
tation utilises avec le HTML 4, devenus obsoletes avec le XHTML en raison de la sepa- 
ration entre la structure et la forme d'une page (comme align ou font par exemple). II 
faut done obligatoirement utiliser des feuilles de styles CSS pour appliquer une mise en 
forme a une page Web. De meme, tous les contenus textuels devront etre inseres dans des 
elements conteneurs (comme HI, DrV, ...) rendant ainsi impossible l'ecriture d'un texte 
directement dans la balise BODY. 

Le DOCTYPE transitional, quant a lui, a ete elabore pour favoriser la transition du 
HTML vers le XHTML strict. II est done plus souple et permet par exemple d' utiliser 
certains attributs de mise en forme devenus obsoletes avec le XHTML strict. 

Code 16-4 : balise de declaration d'un DOCTYPE strict : 



" 



DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtnill-strict.cltd"> 



Code 16-5 : balise de declaration d'un DOCTYPE transitional : 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
*"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 



Utilisez un validateur pour verifier votre page XHTML 

Si votre page est accessible depuis Internet, vous pouvez alors utiliser le validateur du W3C pour verifier 
que votre code est bien conforme a la specification du DOCTYPE declare dans la page. Pour cela, il suffit 
d'utiliser I'adresse indiquee ci-dessous et de saisir I'URL de votre page. Si votre page est correctement 
codee, vous obtiendrez un message de felicitations, sinon le validateur vous indiquera les erreurs qu'elle 
comporte, ce qui vous permettra de remedier aux problemes. 
http://validator. w3. org 



L'element racine du document 

Dans une page XHTML, la balise de l'element racine <html> contient deux attributs. Le 
premier attribut xmlns (XML-Name-Space) precise l'espace de nommage XML qui 
prend toujours la meme valeur : http://www.w3.org/1999/xhtml alors que le second xml :lang 
indique la langue utilisee dans la page et prend la valeur f r si votre document est en 
francais. 

Code 16-6 : 

|<html xmlns="http://www. w3.org/1999/xhtml " xml :lang="fr"> 
</html> 
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La balise meta Content-Type 

La balise meta Content- Type indique que votre page contient du HTML ou un langage 
heritant de ses specificites comme le XHTML (text/html) et precise l'encodage utilise 
dans le document (soit l'encodage UTF-8 dans notre exemple : charset=utf-8). 

Code 16-7 : 



<meta http-equiv="Content-Type" content="text/html ; charset=utf-8" 



/> 



La balise de titre 



Comme pour les pages HTML 4, le titre est toujours tres important et doit etre choisi 
judicieusement. En effet, le titre ne se contente pas d'apparaitre dans la barre de titre 
(barre situee en haut de la fenetre des navigateurs), il est aussi utilise par defaut lors de 
l'enregistrement de votre page dans les favoris et son contenu est surtout exploite par les 
moteurs de recherche pour le referencement de votre page. 

Code 16-8 : 

<title>Titre de la page</title> 



Une page XHTML complete 

La configuration minimale d'une page doit contenir les balises que nous venons de 
presenter ci-dessus et etre structuree en deux parties a l'aide des balises <head> et <body> 
(voir code 16-9). La premiere balise <head> est la balise d'en-tete de la page et regroupe 
les informations complementaires a la page (invisibles a l'ecran) alors que la seconde 
balise <body> est la balise du corps de la page et contient tous les elements visibles du 
document XHTML. 

Code 16-9 : 

<?xml version="1.0"?> 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

*" http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1-transitional .dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml " xml :lang="fr"> 

<head> 

<meta http-equiv="Content-Type" content="text/html ; charset=utf-8" /> 

<title>Titre de la page</title> 

</head> 

<body> 

Ici le contenu visible de la page 

</body> 

</html> 
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Les feuilles de styles en cascade, egalement appelees CSS (Cascading Style Sheets) ont 
ete ajoutees au W3C des 1996. II a cependant fallu attendre 2001 et l'apparition de Internet 
Explorer 6 pour qu'elles soient largement utilisees sur la plupart des sites. 

Parmi les freins a leur diffusion, citons l'incidence des editeurs Wysiwyg (comme 
Dreamweaver ou FrontPage) pour lesquels il a ete tres difficile d'implementer la sepa- 
ration du contenu et de la forme dans les fonctionnalites de leur interface. Mais le prin- 
cipal frein est, sans aucun doute, le probleme de compatibilite entre les navigateurs : en 
effet, ceux-ci ont longtemps interprets les styles a leur maniere, sans se preoccuper des 
specifications publiees. 

Desormais, et grace au XHTML qui separe parfaitement le contenu de la forme, l'usage 
des styles est devenu obligatoire (du moins en mode XHTML strict) pour appliquer une 
presentation a une page Web. 

Cependant, hormis le fait d'apporter une solution pour la mise en forme du contenu d'une 
page XHTML, les CSS presentent bien d'autres avantages. Elles permettent d'alleger le 
code source de votre page et en facilitent la lecture ; elles contribuent a rendre un site homo- 
gene et a en ameliorer la maintenance en centralisant dans un meme fichier les codes de mise 
en forme du site entier ; elles permettent de depasser (et de loin) les limites de la mise en 
forme bridees par le HTML. De meme, si vous vous preoccupez de l'accessibilite de 
votre site, l'usage des CSS sera la solution ideale pour autoriser la consultation de vos 
pages par un large eventail d'utilisateurs, enfin, les styles pouvant etre changes dynami- 
quement par le DOM, l'apparence d'une page pourra ainsi etre modifiee a la volee, ce qui 
se revelera tres utile pour mettre en oeuvre les fonctions de traitement d'une reponse 
d'une requete Ajax. 



Les differentes versions des CSS 

La premiere specification du W3C sur les CSS date de 1 996 et a ete publiee sous le nom Feuilles de 
styles en cascade niveau 1, egalement appelee CSS1. Une nouvelle version nommee CSS2 lui succeda 
en 1998. Enfin, une autre publication CSS3 est a I'etude depuis 2001 mais dans le cadre de cet ouvrage, 
nous nous limiterons a la version CSS2 qui a I'avantage de pouvoir etre interpretee actuellement par la 
plupart des navigateurs recents. 
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Syntaxe des CSS 
Le selecteur de style 

Pour qu'un style soit applique a un element particulier de la page HTML, il faut utiliser 
une reference a cet element. Pour materialiser cette reference, nous utiliserons differents 
types de selecteurs que nous allons presenter dans cette partie. 

Le selecteur est suivi d' accolades dans lesquelles viendra se placer la declaration du style 
que nous presenterons ensuite. 

Syntaxe generale des selecteurs : 

selecteur {declaration du style} 

Le selecteur de balise 

Le selecteur le plus simple se nomme selecteur de balise. II permet de redefinir la mise 
en forme par defaut d'une balise standard du HTML. Ce selecteur est tres interessant si 
Ton desire appliquer un ensemble de styles a une page HTML complete pour en modifier 
son apparence mais sans modifier les balises qui la structurent. II suffira alors d'ajouter la 
definition des styles en interne ou dans une feuille de styles externe pour que la page soit 
modifiee automatiquement. 

Par exemple, pour appliquer un style particulier a toutes les balises hi de la page, il suffit 
de saisir le nom de la balise hi (sans les symboles < et >) suivi des accolades contenant la 
declaration du style a appliquer a ce type de balise (voir code 17-1). 

Syntaxe : 

nomBalise {declaration du style} 

Code 17-1 : exemple de selection de toutes les balises hi : 

hi {declaration du style} 

II est aussi possible d'affecter un meme style a plusieurs types de balise. Dans ce cas, il 
suffit de saisir leurs noms separes par des virgules. Dans l'exemple ci-dessous, le meme 
style sera applique aux balises hi ainsi qu'aux balises p de la page. 

Code 17-2 : exemple de selection de plusieurs types de balises : 

hl.p {declaration du style} 

Si vous desirez appliquer un style a un element situe dans plusieurs balises imbriquees, il 
faudra alors indiquer les differentes balises dans leur ordre d' imbrication a la suite l'une 
de 1' autre et sans virgule en guise de selecteur. Dans l'exemple ci-dessous, le style sera 
applique au contenu situe dans une balise p, elle-meme situee dans une balise div. 

Code 17-3 : exemple de selection de balises imbriquees : 

div p {declaration du style} 

La classe class 

Avec le selecteur de balise que nous avons presente precedemment, l'application d'un 
style est limitee a une balise standard du HTML (ou a la composition de plusieurs 
balises). II est cependant sou vent necessaire de devoir appliquer un style a une selection 
de plusieurs balises standards bien definies ou encore a des contenus qui ne sont pas 
inclus dans une balise standard. 
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Les balises div et span 

Pour faciliter I'application des styles a une page Web, des balises neutres (sans mise en forme predefine) 
ont ete ajoutees au HTML. II existe deux types de balises neutres : la balise <div> qui est de type block 
et peut structurer d'autres elements bl ock dans une page, et la balise <span> qui est de type i nl i ne et 
permet de delimiter une chaine de caracteres dans un texte (pour plus de detail sur ces balises, reportez- 
vous si besoin au chapitre concernant le XHTML). Ces deux balises seront tres souvent utilisees avec les 
selecteurs cl ass et id presentes dans cette partie. 



Le selecteur class pourra alors solutionner ces problemes car il permet d' identifier nomi- 
nativement la selection des balises auxquelles nous desirons appliquer le style. De plus, 
si le contenu n'est pas inclus dans une balise standard, le selecteur id peut etre couple a 
une balise neutre (di v ou span, voir encadre) pour delimiter ainsi la zone a laquelle il faut 
appliquer un style particulier. 

II est important de bien comprendre qu'une meme classe peut etre attribuee a plusieurs 
balises (contrairement au selecteur i d que nous allons presenter ci-apres) et que ces bali- 
ses pourront etre eventuellement de type different (di v, p) si les proprietes concernees par 
la regie de styles sont disponibles dans chacune de ces balises. 

Syntaxe : 

.nomClass {declaration du style} 
Exemple d'identification de la (ou les) balise(s) concernee(s) par la classe : 

<div class="nomClass" > ... </div> 

Lidentifiant id 

Le selecteur id peut aussi etre utilise pour appliquer des styles et fonctionne d'une 
maniere similaire au selecteur class hormis sa syntaxe qui est differente et surtout le fait 
qu'un meme selecteur id ne pourra identifier qu'un seul element dans le document 
HTML (contrairement au selecteur class) et il sera plutot utilise pour la mise en page 
(positionnement de bloc conteneur, par exemple) que pour la mise en forme de carac- 
teres. 

Cela est une caracteristique tres importante de ce type de selecteur car elle nous permet- 
tra aussi d'utiliser ce meme selecteur id pour referencer individuellement des elements 
afin de leur appliquer des traitements JavaScript. 

Pour declarer un style avec un identifiant, il faut faire preceder son nom d'un diese (#). 
La declaration du style sera encadree par des accolades comme avec le selecteur class. 

A noter qu'il est possible de faire cohabiter dans la meme balise une identification par 
une classe et une autre par un identifiant. On peut ainsi convenir de configurer les styles 
des elements a l'aide des classes alors que les identifiants seront reserves a la program- 
mation JavaScript pour manipuler ces memes elements, par exemple. 

Syntaxe : 

#nomId {declaration du style} 
Exemple d'identification de la (ou les) balise(s) concernee(s) par un identifiant : 

<div id="nomId" > ... </div> 
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Les pseudo-classes 

Dans certains cas, il est possible qu'un element ne puisse pas etre identifie par une balise 
(qu'elle soit standard comme p ou neutre comme div). Pour solutionner ce probleme, 
vous pouvez recourir aux pseudo-classes. II en existe deux types : les pseudo-classes de 
lien pour l'application d'un style particulier lorsqu'un lien a ete visite, par exemple (voir 
tableau 17-1), et les pseudo-classes de paragraphe pour l'application d'un style particulier 
a la premiere lettre d'un paragraphe, par exemple (voir tableau 17-2). 

Tableau 17-1 Pseudo-classes de lien 



Pseudo-classe 


Designation 


:link 


Lien pas encore selectionne 


: visited 


Lien deja visite 


:hover 


Lien pendant le survol de la souris 


:active 


Lien au moment ou il est clique 



Attention a I'ordre des pseudo-classes de lien 

Pour eviter des effets inattendus, il est imperatif que I'ordre des declarations ci-dessous soit respecte : 
:link, puis :visited, puis :hover etenfin :active. 



Tableau 17-2 Pseudo-classes de paragraphe 



Pseudo-classe 


Designation 


:fi rst-letter 


Premiere lettre d'un paragraphe 


:fi rst-1 ine 


Premiere ligne d'un paragraphe 



Pour declarer une pseudo-classe, il faut commencer par indiquer le selecteur choisi. Cela 
peut etre un simple selecteur de balise (a par exemple), une classe ou un identifiant id. 
Vous devez ensuite faire suivre ce selecteur de la pseudo-classe a considerer (voir les 
tableaux 17-1 ou 17-2). Enfin, comme pour tous les selecteurs, la declaration du style 
encadree par des accolades cloture la ligne. 

Syntaxe : 

selecteur : pseudo-classe {declaration du style} 

Pour illustrer une utilisation d'une pseudo-classe, nous vous proposons de l'appliquer 
pour definir le style d'une couleur aux differents etats de tous les liens hypertextes d'une 
page (voir code 17-4). 

Code 17-4: voirfichierexemplePseudoClasse.html : 

<head> 

<style type="text/css"> 

<!-- 

a:link {color: #999999;} 

a:visited {color: #FF00FF;} 

a:hover {color: #FF0000; } 

a:active {color: #FFFF00;} 

--> 

</style> 
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</head> 

<body> 

<a href="#">Cliquez ici</a> 

</body> 



La declaration d'un style 

Nous avons vu comment identifier l'element auquel sera applique le style avec les selec- 
teurs. Nous allons voir maintenant comment declarer le style lui-meme pour ensuite le 
placer entre les accolades qui suivent le selecteur. 



Terminologie des styles 

On appelle communement un style I'ensemble des directives elles-memes composees d'une propriete et 
d'une valeur. Les styles sont ensuite lies a un selecteur et I'ensemble constitue ce qu'on appelle une regie 
de styles. Pour que tous ces termes soient clairement identifies, nous avons resume la syntaxe d'une regie 
de styles en annotant les termes associes a ses differents composants dans la figure 17-1. 



Figure 17-1 

Terminologie 
des styles 



Rijyl'- d'J StylS 



{ 



■ 



Style < 



# monSelecteur 

{ 



font-size 



text-align 



12 ; 
right ; 



} 



Premiers 

directive 



Seconds 
diraetivft 



, 



Y 

Propriety 



J \- 



Valeur 



La declaration d'une directive de style est composee de deux parties. La premiere corres- 
pond a la propriete du style et la deuxieme a la valeur qui lui est appliquee. Ces deux 
parties sont separees par deux points ( : ) et terminees par un point virgule ( ;). L' ensemble 
constitue ce qu'on appelle une directive (et aussi le style dans le cas particulier ou il n'y 
a qu'une seule directive). 

Syntaxe d'une directive : 

propriete : valeur ; 

Le style ainsi constitue sera ensuite place entre les accolades, precedees du selecteur. Cet 
ensemble constitue ce qu'on appelle une regie de styles. 

Syntaxe d'une regie de styles constitute d'un selecteur et d'un style d'une seule directive : 

selecteur (propriete : valeur ;} 
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II est possible de declarer plusieurs directives de style pour un meme selecteur. Dans ce 
cas, les couples propriete/valeur de chaque directive sont places a la suite les uns des 
autres en respectant la meme syntaxe que pour la declaration d'une directive isolee. 
Un groupe de directives constitue ce qu'on appelle le style proprement dit. 

Syntaxe d'un style constitue de deux directives : 

propriete_l : valeur_l ; propriete_2 : valeur_2; 

Syntaxe d'une regie de styles constitute d'un selecteur et d'un style de deux directives : 

| selecteur {propriete_l : valeur_l ; propriete_2 : valeur_2;} 

Les proprietes et les valeurs d'un style 

II existe une grande diversite de proprietes classees par families selon 1' element auquel 
elles se rapportent mais elles sont bien trap nombreuses pour toutes les mentionner dans 
le cadre de cet ouvrage. Vous trouverez ci-dessous quelques exemples de ces proprietes 
mais nous vous invitons a consulter le site officiel du W3C, http://www.w3.org/TR/REC- 
CSS2/, pour en obtenir une liste exhaustive. 



Tableau 17-3 Quelques exemples de proprietes et de leurs valeurs associees 



Families 


Proprietes 


Valeurs 


Arriere-plan 


background-col or 


<couleur> 
transparent 


background-image 


<url> 






none 


Police 


font-size 


<taille> 
smal 1 
medium 
large 


font-style 


normal 






ital ic 






obi ique 


font-weight 


normal 
bold 






1 ighter 


Texte 


text-al ign 


left 

right 

center 






justify 


text-decoration 


none 






underl ine 






overl ine 


vertical -al ign 


top 
middle 






bottom 


color 


<couleur> 
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Tableau 17-3 Quelques exemples de proprietes et de leurs valeurs associees (suite) 



Families Proprietes Valeurs 


Boite 


border-col or 


<couleur> 


margin 


<dimension-absol ue> 
<dimension-relative> 


padding 


<dimension-absol ue> 
<dimension-relative> 


Affichage 


position 


static 
absol ute 
relative 
fixed 


vi sibil ity 


collapse 

visible 

hidden 


display 


block 
inl ine 
none 






_J 



Les unites dune dimension 

En ce qui concerne les valeurs correspondantes a la dimension d'un element, differentes unites peuvent 

etre utilisees avec les CSS : le pixel (px), le pica (pc), le point (pt), le centimetre (cm), le pouce (in) et le 

pourcentage (%) pour indiquer une dimension relative. 

Pour les polices, il est possible d'indiquer leur taille d'une maniere fixe (en point ou en pixel) ou relative (en 

em : 1 em correspondant a 1 00 % de la taille de la police en cours). Enfin, si vous desirez que votre valeur 

soit prise en compte par tous les navigateurs, ne mettez pas d'espace entre la valeur et I'unite (exemple : 

2em). 



Valeurs des couleurs 

Avec les CSS, les couleurs peuvent etre exprimees de differentes manieres : avec la notation tradition- 
nelle en hexadecimale au format #RRVVBB avec pour R, V et B une valeur hexadecimale fonction des 
3 composantes d'une couleur Rouge, Vert et Bleu (par exemple #FF0000 pour du rouge), avec la notation 
hexadecimale abregee (soit #F00 pour du rouge, une couleur n'etant representee que par un seul 
symbole hexa), avec la notation RGB decimale (soit rgb(255,0,0) pour du rouge) ou encore en utilisant le 
nom d'une couleur normalises en anglais (red, gree, yellow, blue...). 
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Application d'un style 

Differentes manieres de specifier un style 

Une fois les regies de styles definies, il faut ensuite les specifier a un endroit pour 
qu'elles puissent agir sur les elements de la page HTML. II existe plusieurs endroits ou 
specifier un style et nous proposons de vous les presenter ci-dessous. 

Style en ligne 

Cette methode de declaration d'un style directement dans la balise de 1' element n'est pas 
tres avantageuse en production car les styles ne sont pas separes de la presentation 
HTML et la centralisation des styles n'est plus assuree, d'ou un probleme de mainte- 
nance. En revanche, elle peut etre exploitee pour la mise au point de la maquette d'une 
page car chaque style ne concerne qu'un seul element isole et cela permet de faire des 
reglages sans perturber le reste de la page. 

Vous trouverez ci-dessous un exemple d'utilisation (voir fichier exemplelnl_ine.html) : 

<hl style="color:red;">Bonjour a tous</hl> 

Style interne 

Si vous desirez que les regies de styles soient appliquees uniquement aux elements d'une 
page, il est possible de les specifier dans une balise <style> imbriquee dans la balise 
<head> de la page concernee. 

Dans 1' exemple ci-dessous, nous specifions le meme style que precedemment mais il est 
applique de la meme maniere a tous les elements hi de la page. 

Code 17-5 : page HTML (voir fichier exemplelnterne.html) : 

<head> 

<style type="text/css"> 

<! — 

hi { 

color: red; 

} 

--> 

</style> 

</head> 

<body> 

<hl>Bonjour a tous</hl> 

<hl>Bonsoir a tous</hl> 

</body> 

Vous remarquerez que la regie de styles est encadree par les symboles des commentaires 
HTML (< ! - - et - ->). Cette precaution permet d'eviter qu'un navigateur ne supportant pas 
les styles ne genere une erreur, meme si cela est desormais tres rare. 

Feuille de styles externe 

La facon la plus interessante d'exploiter tous les avantages des regies de styles est de les 
specifier dans une feuille de styles externe a la page HTML. Celle-ci pourra ensuite etre 
appliquee facilement a toutes les pages d'un site, permettant ainsi d'obtenir un site 
homogene et d'en faciliter sa maintenance. A noter que cette methode permet aussi 
d'ameliorer le temps de chargement des pages car, une fois chargee, la feuille de styles 
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sera memorisee dans le cache du navigateur permettant ainsi de ne pas la recharger a 
chaque appel d'une page du site. 

Pour creer une feuille de styles, il suffit de saisir les regies des styles directement dans un 
fichier portant une extension .ess. Une balise de lien <link> devra ensuite etre ajoutee 
dans toutes les pages desirant exploiter les styles du fichier. 

Dans l'exemple ci-dessous, le style precedent a ete deplace dans le fichier nomme 
styl e . ess et un lien a ete ajoute a la page HTML. Outre les avantages que nous venons de 
rappeler, le fonctionnement sera strictement identique a l'exemple precedent. 

Contenu du fichier stylel.css : 

/* CSS Document */ 
hi { 

color: red; 
} 

Code 17-6 : page HTML (voir fichier exempleExterne.html) : 

<html> 
<head> 
<link href="stylel.css" rel="stylesheet" type="text/css" /> 

</head> 

<body> 

<hl>Bonjour a tous</hl> 

</body> 

</html> 

Si vous observez le lien dans la page HTML, vous remarquerez que l'attribut 
rel="styl esheet" a ete ajoute afin de preciser que le lien concerne une feuille de styles. 

Style importe 

II existe aussi une autre alternative a l'utilisation du lien <1 ink> pour lier une feuille de 
styles. En effet, il est aussi possible d'importer une feuille de styles dans la page HTML 
avec une propriete du CSS2 (©import) au lieu d'y faire reference par le biais d'un lien, 
simple balise HTML. L'avantage de cette methode est de pouvoir importer une feuille 
de styles, non seulement dans une page HTML comme pour la methode precedente, 
mais surtout dans une autre feuille de styles qui heriterait ainsi des styles de la seconde 
feuille. 

Dans l'exemple ci-dessous, nous avons cree une seconde feuille de styles nommee 
style2.css qui contient la propriete ©import qui importe la feuille de styles precedente 
(non modifiee). La page HTML, quant a elle, fait maintenant reference a cette nouvelle 
feuille styl e2 . ess. Nous avons egalement modifie le style de la seconde balise de titre en 
h2 de sorte a pouvoir constater 1' effet produit par les deux feuilles de styles dans la page 
HTML. Ainsi, si vous testez la page, le premier texte « Bonjour a tous » s'affichera en 
rouge (grace a la feuille styl el . ess) et le second texte « Bonsoir a tous » s'affichera quant 
a lui en vert (grace a la feuille sty 1 e2 . ess). 

Contenu du fichier stylel.css : 

/* CSS Document */ 
hi { 

color: red; 
} 
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Contenu du fichier style2.css : 

/* CSS Document */ 

©import url (stylel.css) ; 

h2 { 

color: green; 

} 

Code 17-7 : page HTML (voir fichier exempleImport.html) : 

<html> 
<head> 
<link href="style2.css" rel="stylesheet" type="text/css" /> 

</head> 

<body> 

<hl>Bonjour a tous</hl> 

<h2>Bonsoir a tous</h2> 

</body> 

</html> 



L'effet cascade d'un style 

Dans la partie precedente, nous avons presente plusieurs moyens de definir un style. 
Cependant, en cas de conflit, il faut faire appel aux ordres des priorites (voir tableau 17-4) 
pour arbitrer 1' application du style a l'element concerne. 

En regie generale, le style le plus pres de l'element est celui qui a la plus forte priori te. 
Ainsi, le style en ligne (meme s'il est peu utilise) aura priorite sur le style interne de la 
page qui lui-meme aura priorite sur le style de la feuille CSS externe. 

Toutefois, les regies de priorites des styles ne sont pas toujours appliquees pour resoudre 
une erreur de definition. En effet, il est quelquefois interessant de les utiliser pour modi- 
fier localement (pour une page, par exemple) le style general du site. Dans ce cas, il suffit 
de surcharger volontairement le style interne de la page afin qu'il ecrase celui qui est 
defini dans la feuille de style externe. 

Tableau 17-4 Regies de priorites des styles 



Regie (de la plus forte a la plus falble) 


Type de definition du style 


1 


Style en ligne 


2 


Style interne 


3 


Style externe 



Forcer un style avec (important 

A noter qu'il existe une solution pour modifier I'ordre etabli de ces priorites. II suffit pour cela d'ajouter la 
valeur ! important apres la valeur de la directive et avant le point virgule pour rendre prioritaire le style 
concerne sur les autres styles quelles que soit leurs priorites. Dans I'exemple ci-dessous (voir code 1 7-8), nous 
avons utilise cet artifice pour forcer le style interne (color: red) sur le style en ligne (color: green). 



Code 17-8 : 






<head> 






<style type= 


"text/ess 


'> 
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Chapitre 17 



P ( 

color: redh'mportant; 

} 

--> 

</style> 

</head> 

<body> 

<p style="color: 

</body> 



green">Bonjour</p> 



L'effet d'heritage d'un style 

Lorsqu'un style est applique a un element qui contient d'autres elements enfants, ces 
derniers heritent alors du style de leurs parents. 

Ainsi, dans l'exemple ci-dessous l'element <i> herite du style de son parent <hl> en plus 
de son propre style. Si vous testez cette page, vous remarquerez que tout le texte est de 
couleur rouge et que le mot « tous » est en plus souligne. La balise <i > herite done bien 
de la couleur de la balise <hl> en plus de son style de soulignement. 

Code 17-9 : page HTML (voir fichier exempleHeritage.html) : 

<head> 

<style type="text/css"> 

<!-- 

hi { 

color: red; 

} 

i { 

text-decoration: underline; 

} 

--> 

</style> 

</head> 

<body> 

<hl>Bonjour a <i>tous</i></hl> 

</body> 
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Definition du XML 

XML est l'acronyme de extensible Markup Language. Comme le HTML, le XML est 
une norme SGML (Standard Generalized Markup Language) mais celle-ci a ete develop- 
pee bien plus tard (en 1998) alors que le HTML est defini par le consortium W3C depuis 
1990. 

Un document XML se caracterise par le fait qu'il contient uniquement des donnees struc- 
turees, sans aucune indication quant a leur presentation. Ainsi, si vous ouvrez un document 
XML dans un navigateur, il n'affiche que la structure des donnees sous forme d'arbo- 
rescence. XML est done particulierement bien adapte pour structurer, enregistrer et 
transmettre des donnees. 

Le XML est aussi un langage qui utilise des balises non predefinies pour structurer un 
document, contrairement au HTML pour lequel l'usage de balises standard est obligatoire 

(<head>, <body>, <p>...). 



Avantages du XML 

Les avantages du XML sont multiples. En voici quelques-uns qui devraient vous convaincre 
de son interet. 

• Simple - Comme les documents de type HTML, le document XML est un simple 
document texte construit a partir de balises contenant des informations. II est done 
lisible et interpretable par tous sans outil specifique et avec peu de connaissances 
prealables. 

• Souple - L'utilisateur peut, s'il le desire, structurer les donnees et nommer librement 
chaque balise et attribut du document (contrairement au HTML pour lequel les noms 
des balises et des attributs sont predefinis). 

• Extensible - Le nombre de balises n'est pas limite (comme e'est le cas pour le HTML) 
et peut done etre etendu a volonte. 
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• Independant - Grace a son contenu base sur un document texte et done universel, il 
peut etre utilise sur tout type de plate -forme (PC, Mac, Unix...) mais egalement avec 
tout type de langage de programmation (PHP, ASP. . .). 

• Interoperabilite - Le fait que le XML soit un langage universel favorise l'interopera- 
bilite des applications et permet de realiser rapidement et simplement des echanges de 
donnees. 

• Gratuit - Le XML est developpe par le consortium W3C. Son utilisation est done 
libre et ne necessite pas 1' achat d'une licence commerciale. 

Utilisations du XML 
Pour le stockage de donnees 

Grace a sa structure, le document XML hierarchise et formate les donnees. II permet de 
stocker des donnees complexes et favorise ainsi leur exploitation au sein d'une application. 

Pour le transfert de donnees 

Lors du developpement d' applications sur des serveurs heterogenes, on est frequemment 
confronte a des problemes de transfert de donnees entre applications. II est toujours 
possible de creer des programmes pour convertir ces donnees d'un format vers un autre, 
mais il est souvent plus judicieux d'exploiter un document XML pour assurer leur 
transfert (tout en preservant leur structure) entre ces deux applications. 



Structure d'un document XML 

Si vous avez deja utilise un document XHTML, vous ne serez pas depayse face a un 
document XML. 

L'exemple ci-dessous permet de stocker d'une maniere structuree l'age des petits-enfants 
de plusieurs peres de famille (pour simplifier la representation, seuls les descendants 
masculins ont ete representes). 

Exemple de document XML : 

<?xml version="1.0" encoding="UTF-8"?> 
<!D0CTYPE info SYSTEM "http://adressedusite.com/info.dtd"> 
<ages> 
<pere prenom="Jean" nom="Dupond"> 
<enfant prenom="Paul "> 
<petitenfant prenom="Laurent">8</petitenfant> 
<petitenfant prenom="Jul ien">5</petitenfant> 
</enfant> 

<enfant prenom="Alain"> 
<petitenfant prenom="Charles">12</petitenfant> 
</enfant> 
</pere> 

<pere prenom="Cl aude" nom="Durand"> 
<enfant prenom="Fabrice"> 
<petitenfant prenom="Alex">10</petitenfant> 
<petitenfant prenom="Maxime">7</petitenfant> 
<petitenfant prenom="Fabien">3</petitenfant> 
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</enfant> 
</pere> 

<pere prenom="Thierry' 
<enfant prenom="Nico' 
<petitenfant /> 
< ! --Ni col as n'a pas 
</enfant> 
</pere> 
</ages> 



nom="Duval "> 
as"> 

d'enfant--> 



element texte 
nodcValuc = 

e 



Element texte 

node Value = 
S 



element texte 

nodcValuG = 

12 



element texte 

node Value = 
10 



element texte element texte 



node Value : 

7 



cpetitenfant> <petitenfants epetitenfant= spetitenfants cpetitenfants epetitenfant: 



prenom=" La U rant' 



prenom^-Jullen" 



prvfiom° T 'ChBrlBB T ' 



<enfant> 

prenom="Paur p 



prenom="Alex" 



I 



node Value = 
3 



prenoR»="'Maxim8" 



<enfant> 

prencsm="Alain 1 ' 



x 



«VALEURS DES ELEMENTS 
(ages des pet its enfants) 



pranom'Tabien' 



<enfant> 

prenom="Fabrice M 



<pere> 

nom="DlJpond , ' 
prenom="Jean" 



<pere> 

nom="DurantiT 
prenoms'-Claude" 



<ages> 

(racine du document) 



<enfant> 



prenom="Nicolas M 



<pere> 

nom="Duvar 
prenom="Thierry" 



Figure 18-1 

Structure d'un document XML 

L'en-tete 

Le document commence par un en-tete (facultatif) qui contient des informations sur la 
version de XML (version="1.0"), le jeu de caracteres utilise (encoding="UTF-8") et l'auto- 
nomie du document (standalone="no"). Dans l'en-tete, seule la version est obligatoire. Si 
aucun type de codage n'est defini, l'UTF-8 est utilise par defaut. 

j <?xml version="1.0" encoding="UTF-8"? standalone="no" > 

L'en-tete peut aussi faire reference a une declaration du type de document (la DTD : 
Document Type Definition) qui permet de valider la conformite du document en se refe- 
rant a l'URL d'un document en ligne ou en local (exemple : http://adressedusite.com/ 
info.dtd). 



<!DOCTYPE info SYSTEM "http://adressedusite.com/info.dtd"> 
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Si l'en-tete se refere a une DTD exteme (comme c'est le cas dans l'exemple ci-dessus), 
le document n'est pas autonome et l'attribut standal one doit etre configure avec la valeur 
"no". Dans le cas contraire (s'il n'y a pas de DTD ou si elle est interne), le document est 
autonome et la valeur de l'attribut standalone doit etre definie a "yes". En cas d' absence 
de l'attribut standalone, la valeur par defaut est "no". 

Le document XML qui suit l'en-tete utilise des blocs de construction semblables a ceux 
des documents HTML pour structurer son contenu (elements, attributs, valeurs et 
commentaires). 



L'element 



Un element (appele aussi noeud) est l'entite de base du document XML. II peut contenir 
d'autres elements ou tout type de contenu (chaine de caracteres, etc.). Le contenu d'un 
element est encadre par une balise ouvrante (par exemple <pere>) et une balise fermante : 
une balise fermante contient le meme nom que la balise ouvrante precede d'un slash (par 
exemple </pere>). 

Si l'element ne possede pas de contenu, les balises ouvrante et fermante sont remplacees 
par une seule balise comportant un slash apres le nom de l'element (par exemple <petit- 
enfant />). 

Le nom indique dans ces deux balises doit decrire le contenu de l'element, mais il n'est 
pas predefini comme en HTML (<body>, <table>, <form>, etc.). Bien que le nom de 
l'element est libre, il doit etre compose uniquement des lettres de l'alphabet, des chiffres 
ou des caracteres « - » et « _ ». II ne doit jamais contenir d'espace ou commencer par un 
chiffre. 



L'attribut 



II est possible d'ajouter des attributs a la balise ouvrante d'un element (par exemple 
<enfant nom="Paul ">). Le nom des attributs contenus dans une balise est couple avec une 
valeur encadree par des guillemets (par exemple nom="Paul "). Un attribut doit toujours 
avoir une valeur. Le nombre d' attributs par element n'est pas limite, a condition que 
chaque nom d'attribut soit different ; l'exemple ci-apres est done incorrect : <pere 
nom="Durand" nom="Dupond">. Si un element comporte plusieurs attributs, ils doivent etre 
separes par des espaces (par exemple <pere prenom="Jean" nom="Dupond">). 



Les valeurs 



Dans un document XML, les valeurs peuvent correspondre a des valeurs d'attribut (par 
exemple nom="Paul") ou a des valeurs d'element (par exemple <petitenfant 
nom="Alex">10</petitenfant>). 



Important 

La valeur d'un element doit etre considered comme un element texte enfant a part entiere de cet element 
dans la hierarchie du document XML (voir figure 18-1). 
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Les commentaires 



Comme pour le HTML, des commentaires peuvent etre ajoutes dans un document XML. 
La syntaxe est d'ailleurs identique a celle utilisee pour integrer des commentaires dans 
une page HTML (par exemple <!--Ceci est un commentaire XML-->). A l'interieur d'un 
commentaire, vous pouvez utiliser tout type de symbole sauf les doubles tirets « — ». Les 
commentaires servent a annoter les documents XML ann de se rappeler de l'utilite de 
certains blocs d'elements ou pour detailler la structure du document. lis peuvent egale- 
ment servir a deboguer en neutralisant une partie du document afin qu'il ne soit pas inter- 
prets par l'analyseur XML. 

Regies d'ecriture d'un document XML bien forme 

Meme si les documents XML sont simples et extensibles, ils ne sont pas pour autant 
depourvus de regies. On appelle « document bien forme » un document qui respecte les 
regies suivantes. 

• Un seul element racine - Chaque document XML doit posseder un seul element 
racine. L element racine contient tous les autres elements du document. Cet element 
particulier s' appelle « noeud racine » ou « root ». 

Exemple : 

<agesXpere>35</pereXpere>43</pereXages> 

Ici, la balise ages est le noeud racine du document XML. 

• Balises de fermeture obligatoires - Comme nous l'avons vu precedemment, chaque 
element doit etre encadre par des balises ouvrante et fermante. Contrairement au 
HTML (dans lequel la balise <p> n'est pas obligatoirement fermee, de meme que <hr>, 
qui est une balise inherente sans balise de fermeture), le XML ne supporte pas 
1' absence de balises fermantes. II faudra done veiller a toujours ajouter une balise de 
fermeture a tous les elements d'un document XML. Si le document possede un 
element vide, utilisez une balise unique avec un slash avant le signe > final (par 
exemple <enfant/>). 

• Respecter l'imbrication des elements - Lorsque vous ouvrez un premier element 
puis un second, inserez la balise de fermeture du second avant celle du premier. Ainsi 
le code suivant est incorrect : <a><b>contenu</a></b>, alors que celui-ci est correct : 

<aXb>contenu</bX/a>. 

• Respecter la casse- Le XML est sensible a la casse. Ainsi, les noms d'elements 
« pere », « Pere » et « PERE » sont considered comme differents. D'autre part, les noms 
des elements et des attributs doivent etre saisis en minuscules. 

• Mettre les valeurs des attributs entre guillemets - Si une balise contient un couple 
nom d'attribut et sa valeur, la valeur doit toujours figurer entre guillemets (simples ou 
doubles), par exemple : <enfant nom="paul ">. Un attribut doit toujours avoir une valeur. 

• Utiliser les entites predefinies pour les caracteres reserves - Comme en HTML, il 
existe des caracteres reserves dont l'usage est interdit (<, >, &, ' et "). Pour chacun de 
ces caracteres, utilisez l'entite predefinie correspondante (<, >, &, ", 
&apos;). 
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Utiliser une section CDATA pour echapper un bloc de texte complet- Afin 
d'eviter d' utiliser des entites pour des longs blocs de texte comportant des caracteres 
reserves, vous pouvez aj outer une section CDATA en respectant la syntaxe suivante : 

<![CDATA[bloc de texte]]>. 



Verification d'un document XML 

Pour savoir si un document est bien forme, une methode simple consiste a I'ouvrir dans un navigateur 
Internet recent possedant un interpreter XML integre, comme les navigateurs ulterieurs a IE 6 ou a Fire- 
fox 2 (voir figure 18-2). Le navigateur presentera alors le document XML sous la forme d'un arbre. Chaque 
noeud de cet arbre pourra etre developpe en cliquant sur le + qui le precede : des qu'un niveau est deve- 
loppe, un - vient remplacer le + afin de permettre a I'utilisateur de le replier. 



Figure 18-2 

Affichage d'un document 
XML bien forme dans 
un navigateur Internet 



htrp://!MalhKt,rSST£<aja*/Mcl»Ers|LhapLS,rdg« 



Cc fit hicr XML ne semblc pas avoir d'infoimatiori de style hii etant associe L'arbre du document est montre 
ei-<3t«0U4- 



- »:peie pienan^'Jean" noin="Dupond"> 

- <eiif suu prnioift^Paul" > 

<p e litnif ant prenom="Lawecit'> 8^/petiteiif smt> 
<p e lireiifaiit pi eiioirt^Julien' > 5<^petitenf aitf ^ 

- <f*irf aitt pi'Miinu.='A]aift"> 

<pelireiifautpreuwn="Chartes'>12</petiteiiifanr> 

■■;\-]il:iur-' 

- <pej e piMiMn""CUu<ie" iupm""Duraiid*> 

- ^ttnfant pr»nom^Pabrie«"> 

<p»rit«ifaut p!«kohi»"A1b!"> 10 e /p#at(iifait> 
*p*tfaa&Qt pieuoiR^MaHme'^^/p eliteiif.iut> 
^perirejifaiit pieiioin="Fafcien'>3^/petitei!faiir> 

- <pei e preiwmplTiieri^" iwin=*Dbval'> 

- <eiif nnt pi einna="N]co]as"> 

<pelitMtfauf/» 

<? — means n'a bjs d'enrant — > 

•:/v]Ti":ilLl :■ 
c ^pPlT> 



jj. 



DTD et document XML valide 

Nous venons d'aborder les regies d'ecriture que doit respecter un document XML bien 
forme. Ces regies confirment que le document est conforme sur le plan syntaxique. 
Cependant, il existe un autre niveau d' exigence pour un document XML : celui d'etre 
valide. 

Pour qu'un document XML bien forme soit valide, il faut qu'il soit conforme a la decla- 
ration du type de document (DTD) qui est specifiee dans l'en-tete du fichier XML (revoir 
la presentation de l'en-tete ci-dessus). Cette DTD decrit toutes les contraintes auxquelles 
le contenu du document XML doit se conformer. Elle precise par exemple les types 
d'elements autorises ainsi que leurs attributs et valeurs possibles. 
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La DTD peut etre specifiee en interne, directement integree au document, ou en externe 
en precisant l'adresse ou Ton peut la trouver. Une DTD peut etre privee (SYSTEM) ou 
publique (PUBLIC). Dans le cas d'une DTD privee (reservee a un groupe specifique d'utili- 
sateurs), une reference a un fichier portant l'extension .dtd doit figurer dans l'en-tete du 
document comme dans l'exemple ci-dessous. 

<!D0CTYPE info SYSTEM "http://adressedusite.com/info.dtd"> 

L'avantage de disposer d'un document valide est de pouvoir acceder a des fonctionnalites 
avancees comme dans les applications d'echange de donnees dans lesquelles la definition 
du type de document de part et d' autre est primordiale pour que les transferts puissent 
etre realises, mais soyez rassures, pour les applications Ajax de cet ouvrage il ne sera pas 
necessaire de creer de DTD. 



19 



JavaScript 



JavaScript est un langage de script qui permet de creer de l'interactivite dans les pages 
Web. Les scripts JavaScript sont integres au code HTML de la page Web et sont executes 
par le navigateur sans devoir faire appel aux ressources du serveur. Ces instructions sont 
done traitees en direct par le navigateur (contrairement aux langages serveur comme le 
PHP). 



Javascript est different de Java 

Bien que les deux soient utilises pour creer des pages Web evoluees et qu'ils reprennent le terme Java 
(cafe en americain), le premier est integre dans la page HTML et interprete par le navigateur (fichier 
source du code), alors que le second est accessible par un module a part (applet) sous forme compilee 
(fichier binaire). 



Avertissement 

L'objectif de ce chapitre et de vous donner les bases du langage JavaScript afin que vous puissiez 

comprendre les instructions utilisees dans les differents ateliers. II n'a done pas la pretention d'etre un 

cours exhaustif sur ce langage car il faudrait y consacrer un livre entier pour cela. 

Si vous desirez completer votre apprentissage du JavaScript, nous vous suggerons de visiter le site ci- 

dessous. 

http://www. w3schools. com/js/ 
Vous pouvez aussi consulter les ouvrages suivants : 

- Thierry Templier et Arnaud Gougeon, Javascript pour le Web 2.0, Editions Eyrolles ; 

- Shelley Powers, Debuter en JavaScript, Editions Eyrolles. 
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La syntaxe de JavaScript 



Attention a la casse de vos codes 

Le JavaScript est sensible a la casse, il convient done de bien verifier que la capitalisation de vos instruc- 
tions est correcte. Par exemple, la fonction alertO s'ecrit en minuscule et non pas AlertO ou 
ALERTO, de meme si vous declarez une variable monResultat, il est imperatif de respecter la meme 
casse a chaque fois que vous I'utilisez dans le programme. 



Emplacements des codes JavaScript 

II est possible de placer des fonctions ou du code JavaScript directement dans la page 
HTML. Dans ce cas, les instructions sont inserees dans l'en-tete ou dans le corps de la 
page et encadrees par une balise de script comme dans le code 19-1 ci-dessous. 

Code 19-1 : fonction JavaScript integree dans une page HTML : 

<script language="javascript" type="text/javascript"> 
<!-- 

function jouerO ( 

alertCvous avez gagne'); 
} 

--> 
</script> 

Les gestionnaires d'evenements peuvent, eux aussi, etre integres directement dans une 
balise HTML comme dans le code 19-2 ci-dessous. 

Code 19-2 : gestionnaire d'evenement insere dans une balise HTML : 
<body onload= "alertf. 'bonjour a tous');"> 

<form name="form"> 

<input type="button" id="go" name="go" onclick="jouer() ;" val ue="jouer" /> 
</form> 

Cependant, de meme qu'il faut desormais integrer dans une feuille de styles CSS externe 
tous les parametres de mise en forme d'une page XHTML afin de separer la structure de 
la presentation d'une page Web, nous vous recommandons pour vos futurs developpe- 
ments JavaScript de regrouper tous les codes, fonctions et gestionnaires d'evenements 
dans un fichier JavaScript externe afin de bien separer la structure HTML de la program- 
mation. 

Ainsi, si nous reprenons les deux exemples precedents de codes integres dans la page, 
nous pourrions obtenir le meme fonctionnement en les regroupant dans un fichier externe 
comme l'illustre le code 19-3 ci-dessous. 

Code 19-3 : fichier JavaScript externe (exemple : fonctionsMachine.js) : 

window. onload= chargement; 
function chargementO { 
document. getElementBy Id ("go") .onclick=jouer; 

alertf. 'bonjour a tous' ) ; 
} 
function jouerO { 

alertCvous avez gagne'); 

} 
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Ce fichier exteme doit neanmoins etre reference par une balise de reference placee dans 
l'en-tete de la page HTML (voir code 19-4). 

Code 19-4 : Balise de reference au fichier externe : 

<script type="text/javascript" src="fonctionsMachine. js"X/script> 

Les commentaires 



Ne confondez pas les commentaires 

Meme si les commentaires d'un programme JavaScript peuvent se retrouver dans une page HTML, il ne 
faut pas confondre les commentaires HTML (voir ci-dessous) avec ceux reserves au JavaScript. 

<! — ceci est un commentaire HTML --> 



Commentaires de simple ligne // 

Si on desire inserer un commentaire sur une ligne ou a la fin d'une instruction, il faut 
ecrire deux barres obliques // devant celui-ci (comme en PHP) : 

Code 19-5 : commentaires simple ligne : 

IalertC'Bonjour") ; //lei e'est un commentaire en bout de ligne 
// Ici e'est un commentaire sur une ligne complete 

Commentaires multilignes /* et */ 

Si on desire inserer plusieurs lignes de commentaire, il faut utiliser le signe /* au debut 
de la zone de commentaire et */ a la fin de celle-ci (comme en PHP) : 

/* 

ceci est un commentaire 
sur plusieurs 
1 ignes 
*/ 



Utiliser les commentaires pour deboguer 

Dans le cadre du depannage d'un script JavaScript, vous pouvez utiliser les commentaires pour neutrali- 
ser une ligne ou un bloc de code. Cela permet de tester la page sans interpreter la partie neutralises et 
d'identifier quel script produit I'erreur. 



La hierarchie JavaScript 

Tous les elements d'une page Web sont contenus dans le document HTML (document) qui 
est lui meme contenu dans la fenetre du navigateur (window). Theoriquement, il faudrait 
done rappeler cette descendance a chaque fois que vous desirez cibler un document 
precis de la page mais, en pratique, il est possible de commencer le chemin hierarchique 
d'un element a partir de document car il est implicitement l'enfant de window. 

Pour construire un chemin hierarchique ciblant un element precis de la page, il suffit 
d'ajouter en syntaxe pointee apres document la hierarchie des differents noms (valeur de 
l'attribut name de chaque element) de ses elements parents. 

Par exemple, pour cibler le bouton du formulaire du code 19-2, nous pouvons ecrire son 
chemin hierarchique comme indique dans le code 19-6, car le bouton go est enfant du 
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formulaire form, lui meme enfant de document (go, form et document etant les valeurs de 
l'attribut name de chaque balise). 

Code 19-6 : ciblage de l'element go (bouton) du formulaire du code 19-2 a l'aide de son 
chemin hierarchique : 

window. document. form. go 

ou encore plus simplement : 

document. form. go 

Selon la structure de la page, ce chemin peut quelquefois etre complique mais, heureuse- 
ment, il existe une autre facon de cibler les elements d'un formulaire. Pour cela, il suffit 
d'utiliser les methodes JavaScript du DOM (revoir si besoin le chapitre consacre a ce 
sujet). Par exemple, si l'identifiant de l'element est connu, nous pouvons cibler l'element 
go de notre exemple precedent en utilisant la methode getEl ementBy Id( ) comme l'illustre 
l'exemple ci-dessous (attention, ici go est la valeur de l'attribut id et non de l'attribut 
name). 

Code 19-7 : ciblage de l'element go (bouton) du formulaire du code 19-2 a l'aide d'une 
methode du DOM : 

document. getEl ementBy Id ( "go") 

Dans le cadre de cet ouvrage, nous allons utiliser principalement cette seconde methode 
pour referencer les elements d'une page HTML. 



L'importance de l'attribut id 

Comme l'attribut class, l'attribut id permet d'attribuer un style a l'element concerne a la difference pres 
qu'un seul element ne peut etre identifie qu'avec un attribut 1 d contrairement a l'attribut class qui permet 
d'identifier une serie d'elements ayant la meme classe. 

D'autre part, l'attribut i d permet surtout au JavaScript de manipuler les attributs et le contenu de l'element 
ainsi identifie. Nous utiliserons frequemment cette particularite avec les differentes methodes DOM dans 
cet ouvrage. 



Les gestionnaires d'evenements 

La plupart des programmes sont declenches par des evenements. Pour configurer un 
evenement, il faut utiliser un gestionnaire d'evenement (voir la selection de quelques 
gestionnaires du tableau 19-1) afin de definir la fonction qui est appelee lorsque l'evene- 
ment se produit. Pour cela, le gestionnaire d'evenement devra etre applique a une refe- 
rence de l'element concerne (revoir si besoin la partie precedente sur le ciblage d'un 
element). II suffit ensuite d'affecter a cet ensemble le nom de la fonction qui prend en 
charge l'evenement (voir code 19-8 ci-dessous). 

Code 19-8 : exemple de configuration d'un gestionnaire d'evenement : 

document. getEl ementBy Id( "go") .onclick=jouer; 

} 

function jouerO { 

alertCvous avez gagne'); 
} 

Cependant, la declaration d'un gestionnaire ne peut etre effectuee que lorsque l'element 
concerne est prealablement charge dans la page. Pour se premunir de cela, il suffit alors 
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d'inserer la declaration du gestionnaire d'evenement dans un autre gestionnaire 
(w1 ndow . onl oad) qui teste si le document contenant l'element est bien charge. 

Code 19-9 : exemple de configuration d'un gestionnaire d'evenement avec un test prealable 
du chargement de la page : 

window. onload= chargement; 
function chargementO { 
document. getElementBy Id ("go") .oncl ick=jouer; 

alert( 'bonjour a tous' ) ; 
} 
function jouerO { 

alertCvous avez gagne'); 
) 

Tableau 19-1 Liste d'une selection de quelques gestionnaires 
d'evenements JavaScript 



Gestionnaire d'evenement 


action detectee 


onblur 


Perte de focus sur un element HTML 


onclick 


Clic de la souris sur un element HTML 


onfocus 


Prise de focus sur un element HTML 


onkeydown 


Pression d'une touche du clavier 


onkeyup 


Relachement d'une touche du clavier 


onkeypress 


Encodage d'une touche du clavier 


onload 


Chargement de la page par le navigateur 


onmousedown 


Pression du bouton de la souris 


onmousemove 


Deplacement de la souris 


onmouseover 


Survol d'un element par la souris 


onreset 


Action du bouton Reset d'un formulaire 


onselect 


Selection d'un texte dans un element HTML 


onsubmit 


Action du bouton Submit d'un formulaire 



Les variables 

La variable et sa valeur 

Les variables sont des symboles auxquels on affecte des valeurs. Apres leur affectation, 
vous pouvez modifier les variables a tout moment au cours du deroulement du 
programme. La declaration d'une variable n'est pas obligatoire en JavaScript car elle 
peut etre creee lors de sa premiere affectation. De meme, les variables prennent le type 
correspondant a la valeur qui leur est affectee. 

Noms des variables 

Les noms des variables JavaScript doivent respecter les contraintes suivantes : 
• Toujours commencer par une lettre ou un caractere de soulignement « _ ». 
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• Honnis la premiere lettre, le nom d'une variable peut comporter un nombre indeter- 
mine de lettres ou chiffres ainsi que les caracteres « _ » ou « $ ». 

• Les espaces ne sont pas autorises. 

• Ne pas utiliser les mots reserves (mots utilises dans le code JavaScript comme par 
exemple return, var, if...). 

• Le JavaScript etant sensible a la casse, il convient d'ecrire les noms des variables avec 
la meme casse que celle qui a ete utilisee lors de sa declaration (ainsi monResultat est 
different de monresultat). 

En pratique, il est judicieux de choisir un nom explicite et de se fixer une regie de 
nommage. 

Types des variables 

Les variables JavaScript peuvent etre de plusieurs types. 

Tableau 19-2 Les variables JavaScript peuvent etre de differents types 
selon leur affectation 



Type de variable Description Exemples 


Chaine 

de caracteres 

(string) 


Leurs valeurs sont des lettres, chiffres ou symboles. 

Pour affecter une valeur alphanumerique a une 

variable, vous devez I'encadrer par des guillemets 

ou des apostrophes. 

Si la chaine comporte une apostrophe, il convient de 

I'echapper avec le symbole « \ » ou de I'encadrer 

avec des guillemets. 

Une chaine peut etre vide, dans ce cas elle doit 

s'ecrire avec deux guillemets sans espace entre les 

deux (comme par exemple " ") 




varl="Dupond" ; 
var3="254"; 
var5= "a" en face" ; 
var5= 'd\'en face' ; 


Numeriques 

(number) 


Leurs valeurs sont des nombres entiers ou deci- 
maux. Pour affecter un entier a une variable, il ne 
doit pas etre encadre par des guillemets. S'il s'agit 
d'une valeur decimale, c'est le point et non la virgule 
qui devra etre utilisee. 


varl=152;//nombre entier 
var2=5.22;//nombre decimal 


Booleens 
(boolean) 


Leurs valeurs sont soit true (vrai), soit fal se (faux). 
Ces valeurs sont affectees a la variable en utilisant 
une expression de condition (exemple : 
varl==var2). 




var3=(varl==2) ; 
/* si varl est egale a 5, 
var3 est une variable 
booleenne et sa valeur 
est false dans ce cas */ 



Comment connaitre le type de donnee ? 

Loperateur typeof , retourne le type de donnee. Ainsi, si la donnee est de type numerique, chaine de 

caracteres, fonction ou objet, cet operateur retourne respectivement number, string, function ou 

object. 

II est alors facile de mettre en place un test pour verifier le type d'une donnee (i nfo par exemple) avec 

une structure semblable a celle-ci : 

if(typeof info =="number") { alertC'c'est un nombre"); } 
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Variables simples 

Une variable simple est une donnee qui ne peut contenir qu'une seule valeur. II existe 
deux facons de declarer une variable : 

Explicitement en faisant preceder son nom du mot-cle var : 

var monResultat; 

Implicitement lors d'une premiere affectation : 

monResultat=200; 



Une variable peut etre declaree explicitement puis initialisee en lui affectant une valeur 
(qui determine son type). Cependant, il est aussi possible de regrouper ce deux actions en 
une seule instruction comme l'illustrent les exemples ci-dessous. 

Code 19-10 : 

//declaration puis initialisation d'une variable simple 

var monResultat; 

monResultat=200; 

//declaration et initialisation simultanee d'une variable simple 
var monResul tat=200; 



Attention aux declarations de variables dans une fonction 

Si vous declarez une variable dans le bloc d'une fonction, il est tres important de bien faire attention au 
type de declaration que vous utilisez. En effet, si vous la declarez explicitement (ce que nous vous enga- 
geons a faire en general), la variable est locale (elle ne peut etre utilisee que dans le corps de la fonction 
concernee) alors que si vous la declarez implicitement, elle est globale et est accessible partout dans le 
script. 

Les variables globales sont parfois necessaires mais peuvent devenir dangereuses si elles rentrent en 
conflit avec d'autres variables de meme nom dans une autre fonction. Nous vous conseillons done de 
toujours declarer vos variables avec le mot-cle var sauf si cela est reellement indispensable pour le fonc- 
tionnement de votre systeme. 



Les tableaux (Array) 

Les tableaux sont des series de valeurs regroupees sous le meme identifiant. On distingue 
deux types de tableaux : les tableaux indices (chaque element de la serie est identifie par 
un index numerique entre crochets comme par exemple : tabl [0]) et les tableaux associa- 
tifs (chaque element de la serie est identifie par une cle texte entre crochets comme par 
exemple : tab2['jean']). 

Tableaux indices 

Pour declarer un tableau indice, il faut creer un objet Array avec l'operateur new (attention 
a bien respecter la casse et a mettre un « A » majuscule a Array lors de la creation du 
tableau). 

Exemple de declaration d'un tableau indice : 

var prenoms = new ArrayO; 
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Une fois le tableau declare, nous pouvons ensuite l'initialiser avec des valeurs. Pour cela, 
il suffit d'utiliser la syntaxe avec crochets (tabl[i]) en precisant l'index correspondant 
(attention, l'index commence a 0). 

Code 19-11 : exemple d' initialisation d'un tableau indice contenant des prenoms : 

|prenoms[0] = "Jean"; 
prenoms[l] = "Alain"; 
prenoms[2] = "Marie"; 

II est aussi possible d'initialiser le tableau lors de sa creation, comme l'illustre le code ci- 
dessous : 

| var prenoms = new ArrayC'Jean", "Alain", "Marie"); 

On peut ensuite acceder aux valeurs d'un tableau en utilisant la meme syntaxe a crochets, 
comme dans 1' exemple ci-dessous : 

document. write( ' Le prenom est : '+prenoms[l]) ; 

Si vous desirez afficher tout le contenu d'un tableau, vous pouvez alors utiliser une 
boucle en exploitant la propriete length qui indique le nombre d'elements dans un 
tableau. 

Code 19-12 : affichage du contenu d'un tableau avec for : 

|for(i=0; Kprenoms. length; i++) { 
document. write( 'Le prenom est : '+prenoms[i]+'<br />'); 

Une autre solution consiste a utiliser une structure for-in comme l'illustre le code ci- 
dessous. 

Code 19-13 : affichage du contenu d'un tableau avec for-in : 

I ford in prenoms) { 
document. write( 'Le prenom est : '+prenoms[i]+'<br />'); 

Tableaux associatifs 

II est egalement possible de remplacer les index par un nom explicite (la cle). Dans ce 
cas, le tableau est dit associatif (exemple tabAssoc["cl e"]). 

Pour declarer un tableau associatif, il faut commencer par creer un tableau des cles avec 
la meme syntaxe que pour un tableau indice. 

Code 19-14 : declaration des cles d'un tableau associatif : 

var agences = new Array("centre","nord","sud"); 

Puis, il faut initialiser chaque valeur du tableau en indiquant la cle entre les crochets. 

Code 19-15 : initialisation des valeurs d'un tableau associatif : 

|agences["centre"] = "Paris"; 
agences["nord"] = "Lille"; 
agences["sud"] = "Marseille"; 

Les tableaux associatifs permettent ensuite d'acceder directement a la donnee d'un 
tableau en precisant simplement sa cle. 
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Code 19-16 : utilisation des valeurs d'un tableau associatif : 

document. write( ' La ville est : '+agences["nord"]) ;//affiche Lille 

Si, toutefois, vous desirez connaitre la cle d'une entree du tableau, il suffit simplement 
d'indiquer son index numerique comme pour les tableaux indices. 

Code 19-17 : utilisation des cles d'un tableau associatif : 

document. write( ' Le secteur est : '+agences[l]) ;//affiche nord 

Tableaux multidimensionnels 

Pour creer un tableau a plusieurs dimensions, il suffit de declarer une autre structure de 
tableau a la place des differentes variables du tableau principal. Le tableau principal se 
comporte alors comme un tableau a deux dimensions (voir le tableau 19-3 et l'exemple 
ci-dessous). 

Tableau 19-3 Matrice correspondante a l'exemple ci-dessous 



MM 


[y]=[0] 


[y]=[i] 


[x]=[0] 


A1 


A2 


M=m 


B1 


B2 



Code 19-18 : initialisation et utilisation d'un tableau a deux dimensions : 

//initialisation d'un tableau a 2 dimensions 

var ligneA= new Array("Al","A2"); 

var ligneB= new Array("Bl","B2"); 

var tableauprincipal=new Array (ligneA.ligneB); 

//utilisation de ses elements 

document. writettableauprincipal [0][0]) ; //affiche Al 
document. write(tableauprincipal [0][1]) ; //affiche A2 
document. writettableauprincipal [1][0]) ; //affiche Bl 
document. writettableauprincipal [1][1]) ; //affiche B2 

Les objets 

Les objets sont des donnees qui peuvent etre regroupees en une seule entite contenant 
de nombreuses proprietes. Pour declarer un objet, il faut creer un objet Object avec 
l'operateur new. 

Exemple de declaration d'un objet : 

var voiture = new Objectt); 

Une fois l'objet declare, nous pouvons ensuite lui affecter des proprietes. Pour cela, il 
suffit d'utiliser la syntaxe pointee en precisant le nom de la propriete a creer. 

Code 19-19 : exemple d'ajout de propriete a un objet : 

I voiture. couleur="rouge" ; 
voiture. puissance="200ch" ; 

JavaScript propose neanmoins une autre alternative (plus concise) a cette technique pour 
declarer et initialiser un objet. C'est d'ailleurs cette syntaxe qui est utilisee pour les 
objets JSON. Le code equivalent aux trois lignes precedentes serait alors le suivant : 

var voiture = { couleur : "rouge", puissance : "200ch"} 
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Pour utiliser ensuite les proprietes d'un objet, il suffit de rappeler le nom de l'objet suivi 
de celui de la propriete concernee en syntaxe pointee. 

Code 19-20 : exemple d'utilisation des proprietes d'un objet : 

document. write( ' la couleur de la voiture est ' + voiture.couleur + '<br>'); 
document. write( ' la puissance de la voiture est ' + voiture. puissance + '<br>'); 

L' execution du code 19-20 affichera les informations ci-dessous a l'ecran. 



la couleur de la voiture est rouge 
la puissance de la voiture est 200ch 






Instructions et point-virgule 



On appelle « instruction » une expression (pouvant etre constitute de variables, constan- 
tes ou d'operateurs) qui est terminee par un point-virgule. Cependant, en JavaScript, le 
point-virgule n'est pas obligatoire si vous retournez a la ligne entre chaque expression 
(nous vous conseillons quand meme de toujours mettre un point-virgule a la fin de toutes 
vos instructions, surtout si vous debutez en JavaScript). 

Code 19-21 : exemples d' instructions : 

resultat=100; 

alert(resultat); 

// ces deux instruction affectent la valeur 100 a la variable resultat puis 

// 1'affichent dans une boite d'alerte, le point-virgule au bout de chaque ligne est 

// facultatif dans ce cas. 

resultat=100; alert(resultat) ; 

// ces deux instructions etant sur la meme ligne, le point-virgule est dans ce cas 

// obligatoire. 



Les operateurs 



Les operateurs permettent de lier des variables ou des expressions. II existe differentes 
families d'operateurs selon les fonctions realisees ou les expressions avec lesquelles on 
peut les employer (affectation, arithmetique, comparaison, logique ou de chaine). 

Operateurs d'affectation 

L'operateur d'affectation est le plus courant. On peut aussi l'utiliser sous une forme 
compacte integrant une operation arithmetique puis une affectation. 

Tableau 19-4 Operateurs d'affectation 



Symbole Definition 




Affectation de base 


+= 


Addition puis affectation 


-= 


Soustraction puis affectation 


*= 


Multiplication puis affectation 


/= 


Division puis affectation 
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L'operateur d' affectation de base permet d'attribuer une valeur issue d'une expression. 
Les autres operateurs d' affectation permettent en outre de realiser des operations arith- 
metiques couplees avec 1' affectation proprement dite. 

Code 19-22 : exemples d' operateurs d' affectation : 

|varl=0; // affectation de base (initialisation de $varl a 0) 
varl+=2; // ici varl vaut 2 (0+2) 
varl+=14; // et maintenant varl vaut 16 (2+14) 

Operateurs arithmetiques 

Lorsqu'on gere des variables de type numerique, on dispose d' operateurs arithmetiques 
qui peuvent realiser toutes les operations mathematiques standard. 

Enfin, 1' incrementation et la decrementation (addition ou soustraction d'une unite) sont 
souvent utilisees en programmation et JavaScript ainsi que PHP fournissent des operateurs 
specifiques pour cela (++ et --). 

Tableau 19-5 Operateurs arithmetiques 



Symbole 


Definition 


+ 


Addition 


- 


Soustraction 


/ 


Division 


* 


Multiplication 


% 


Modulo : I'expression a % b retourne le reste de la division de a par b 


++ 


Increment (a++ ou ++a) 


-- 


Decrement (a-- ou --a) 



Code 19-23 : exemples d' operateurs arithmetiques : 

Ivarl=5+2; // addition de deux valeurs numeriques 
var2=2+varl; // addition d'une valeur numerique et d'une variable 
++var3; // apres cette incrementation, la variable est egale a "var3+l" 

Operateurs de comparaison 

Les operateurs de comparaison sont utilises dans les expressions de condition des struc- 
tures de programme. lis permettent de comparer deux expressions. L' expression qui 
resulte de cette comparaison est egale a true lorsque la condition a controler est verifiee 
et a f al se dans le cas contraire. 

Tableau 19-6 Operateurs de comparaison 



Symbole 


Definition 


== 


Egal 


< 


Strictement inferieur 


> 


Strictement superieur 


<= 


Inferieur ou egal 


>= 


Superieur ou egal 


i = 


Different 
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L'operateur de comparaison permet d'elaborer des expressions de condition que vous 
pouvez utiliser dans les instructions de structure du programme (i f, whi 1 e, f or. . .). 

Code 19-24 : exemple d'utilisation d'une expression de condition : 

if(varl>2) // teste 1 'expression de condition 
{document. writeC'le test est positif"); } 

Operateurs logiques 

Les operateurs logiques permettent de composer des expressions de condition complexes 
a partir de variables booleennes ou d'autres expressions de condition. Vous pouvez utili- 
ser les parentheses pour forcer les priorites entre les operateurs ou pour ameliorer la lisi- 
bilite du code en encadrant les expressions de condition. 

Tableau 19-7 Operateurs logiques 



Symbole Exemple Fonction Definition 


&& 


varl && var2 


ET 


Renvoie true (vrai) si les deux variables varl ET var2 sont 
true. 


II 


varl | | var2 


OU 


Renvoie true (vrai) si au moins I'une des deux variables varl 
OU var2 est true. 


i 


Ivarl 


Negation 


Renvoie la negation de varl . 



L'operateur logique permet de relier logiquement deux expressions booleennes. 
Code 19-25 : Exemple d'utilisation d'operateurs logiques : 

|if((varl>2) && (varl<5)) 
(document. writeC'la variable varl est plus grande que 2 mais inferieure a 5");} 

Operateur de concatenation 

L'operateur de concatenation est souvent utilise pour former des expressions a partir 
d'elements de differents types (variable avec du texte par exemple) ou a partir d'autres 
expressions. L'operateur utilise pour relier ces expressions est le signe + (contrairement 
au PHP pour lequel c'est le point). 

Tableau 19-8 Operateur de concatenation 

Syntaxe 

expressions = expressionl + expression2 ; 

Code 19-26 : exemple d'utilisation d'un operateur de concatenation 

III si varl est egale a 50, alors var3 est egale a "50 euros" 
var3=varl+"euros" ; 



Les fonctions 



Une fonction permet d'exploiter une meme partie de code a plusieurs reprises dans un 
programme, ce qui est tres interessant pour les routines standards souvent utilisees en 
programmation. 
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Declaration d'une fonction 



La declaration d'une fonction comporte une tete et un corps. Le mot-cle function est 
place dans la tete de la fonction, suivi du nom de celle-ci et, entre parentheses, de la liste 
des arguments attendus separes par une virgule (lorsque la fonction ne comporte pas 
d' argument, les parentheses sont vides). La tete de la fonction est suivie du corps encadre 
par des accolades. Les fonctions ont generalement une valeur de re tour, designee par le 
mot-cle return, suivi du resultat retourne dans le programme. 

Tableau 19-9 Declaration d'une fonction 

Syntaxe de la declaration d'une fonction 

function nom_de_fonction (argl,arg2...) 
{ 

instruction].; 

instruction2; 

[return res;] 
} 

Appel d'une fonction 

Une fois que la fonction est declaree, il faut l'appeler dans le programme de sorte a ce 
que le script puisse s'executer. Lappel d'une fonction se fait par le nom de la fonction 
avec ses parentheses dans lesquelles il est possible de passer des parametres si besoin. Si 
un resultat est renvoye par le mot-cle return, il se substitue alors a l'appel de la fonction. 
En general, dans ce cas l'appel de la fonction est alors affecte a une variable afin de 
recuperer le resultat ainsi retourne. 

Tableau 19-10 Utilisation d'une fonction 

Syntaxe de I'utilisation d'une fonction 

nom_de_fonction (argl.arg2...) ; 

Code 19-27 : exemple de declaration puis d'appel d'une fonction nominee moyenneO 
pour le calcul de la moyenne de deux valeurs : 



//Declaration de la fonction 

function moyenne (a,b) //tete de la declaration 
{ //debut du corps 

var res=(a+b)/2; //instructions de la fonction 

return res; //information retournee au programme 
} //fin du corps 

//Utilisation de la fonction dans le programme 

moncalcul=moyenne(4,6) ; //appel de la fonction 

document. writeC'la moyenne de 4 et de 6 est egale a "+moncalcul ) ; 

Variables locales ou globales 

Variable globale declaree dans une fonction 

Selon le type de declaration de la variable dans le corps de la fonction (explicite avec var 
ou implicite sans var) elle est locale ou globale. Une variable locale ne peut etre utilisee 
que dans le corps de la fonction, alors qu'une variable globale peut etre utilisee dans tous 
les scripts (on appelle cela la portee d'une variable). 
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Code 19-28 : exemple d' utilisation d'une variable locale 



//Declaration de la fonction 

function moyenne (a,b) 
{ 

var res=(a+b)/2; //declaration de la variable locale "res" 

return res; 
} 

//Utilisation de la fonction dans le programme 

var resultat=moyenne(4,6) ; //appel de la fonction 

//utilisation du resultat renvoye par la fonction. 

document. writeC'l a moyenne de 4 et de 6 est egale a "+ resultat); 

Code 19-29 : exemple de declaration d'une variable globale dans une fonction 



//Declaration de la fonction 

function moyenne (a,b) 
{ 

res=(a+b)/2; //declaration de la variable globale "res" 
} 

//Utilisation de la fonction dans le programme 

moyenne(4,6) ; //appel de la fonction 

//utilisation de la variable globale res. 

document. writeC'la moyenne de 4 et de 6 est egale a "+res); 

Variable globale declaree en debut de programme 

Les variables declarees en dehors des fonctions (declarees en general au debut du 
programme) sont globales, qu'elles soient declarees d'une maniere explicite ou implicite 
(avec ou sans le mot-cle var). 

Code 19-30 : exemple de declaration d'une variable globale en debut de programme : 



//Declaration de la fonction 

var unite = "euros"; 

function moyenne (a,b) 
{ 

var res=(a+b)/2; //declaration de la variable locale "res" 

res += unite; 

return res; 
} 

//Utilisation de la fonction dans le programme 

var resultat=moyenne(4,6) ; //appel de la fonction 
//utilisation du resultat renvoye par la fonction. 
document. write(resultat) ;//affiche 5 euros 



Structures de programme 

Structures de choix 

Les structures de choix sont utilisees pour traiter les alternatives logiques au cours de 
l'execution du script, afin d'orienter le deroulement du programme en fonction du 
resultat de 1' alternative. Elles comprennent en general une expression de condition. 
Les expressions de condition sont constitutes de variables ou de constantes reliees par 
des operateurs logiques. 
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Structures de choix avec if 



Si l'expression de condition entre parentheses est vraie, l'instraction qui suit est executee, 
sinon il ne se passe rien et le programme continue de se derouler apres le bloc du i f . 

Tableau 19-11 Instruction conditionnelle if 



Syntaxe 

if (expression_de_condition) 
{ 

instruction].; 

instruction2; 

[} 

Forme simplifies (s'il n'y a qu'une seule instruction a traiter) : if (expression_de_condition) instructionl; 

Code 19-31 : exemples de structure if : 

if (varl>4) 

document. writeCl a valeur est superieure a 4"); 

/* ci-dessus un exemple de structure "if" avec une seule instruction */ 
// 

if (varl>4) 

{//debut du bloc if 

document. writeda valeur est superieure a 4"); 

document. write("<br> el 1 e est exactement egale a Svarl"); 
}//f in du bloc if 
//ci-dessus un exemple de structure "if" avec un bloc d'instructions 

Structures de choix avec if et else 

La structure de choix utilisant l'instruction if ne traite que les structures de programme 
ou la condition est vraie ; dans le cas contraire, aucune instruction n'est executee. Avec 
l'instruction el se, vous pouvez definir les instructions a executer dans le cas ou la condi- 
tion testee serait fausse. Ces instructions sont regroupees dans un autre bloc qui suit 
l'instruction else. 

Tableau 19-12 Instructions conditionnelles if et else 

Syntaxe 

if (expression_de_condition) 
{ 

I instructionl; 
instruction2; 

} 
else 

instruction3; 
instruction4; 
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Code 19-32 : exemple de structure if -else : 

if (varl>4) 
{ 

document. write( "la valeur est superieure a 4"); 

document. write( "<br> el 1 e est exactement egale a "+varl); 
} 

else 
{//debut du bloc else 

document. write( "la valeur est inferieure ou egale a 4"); 

document. write( "<br> el 1 e est exactement egale a "+varl); 

}//fin du bloc else 
//ci-dessus un exemple de structure "if" avec "else" 



Structures de boucle 

Lorsqu'un ensemble d' instructions doit etre execute plusieurs fois en fonction d'une 
condition, il faut alors utiliser une structure de boucle. 

Structures de boucle avec while 

La structure la plus simple est realisee a l'aide de l'instruction while. Le bloc destruc- 
tions est execute et repete tant que l'expression de condition retourne true. Lorsque la 
condition est ou devient fausse (fal se), le programme sort de la boucle pour executer les 
instructions qui se trouvent apres la fin du bloc. Dans cette structure, il est frequent 
d' utiliser une variable dediee pour le compteur de boucle (exemple : i). Vous devez 
initialiser cette variable avant la boucle. Elle est ensuite testee dans l'expression de 
condition, puis incrementee (ou decrementee selon les cas) dans le corps de boucle. Pour 
sortir de la boucle, il faut faire evoluer le compteur de boucle, on utilise pour cela un 
operateur d' incrementation ou de decrementation (1++ ou i--). Choisissez le bon type 
d'operateur, en fonction de la valeur de 1' initialisation du compteur et de l'expression de 
condition choisie, sinon vous risquez d'obtenir une boucle infinie. 

Tableau 19-13 Instruction de boucle while 



Syntaxe 

while (expression_de_condition) 
f 
instructionl; 

instruction2; 



Code 19-33 : exemple de boucle while 



i=5; // initialisation du compteur de boucle a 5 

while(i>0) 

{ 

document. write( "Encore "+i+" tour(s) a faire <br>"); 

1--; // decrementation du compteur de boucle 
} 

document. writeC'Voila, c'est enfin termine"); 

/* ci-dessus un exemple qui affiche cinq fois le meme texte (tant que i est 
^•superieur a 0) avant d'afficher le texte final. */ 
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Structures de boucle avec for 



L'instruction for est une seconde solution plus compacte pour traiter les boucles. Sa 
syntaxe est cependant radicalement differente de celle de la structure precedente, car les 
parentheses de l'instruction contiennent trois expressions differentes, separees par des 
points-virgules. Cette syntaxe tres compacte est particulierement appreciable quant a la 
lisibilite du code. 

Tableau 19-14 Instruction de boucle for 

Syntaxe 

for (expressionl ; express ion 2 ;expression3) 
{ 

instruction].; 

instruction2; 

} 

Legende expressi onl : expression evaluee en debut de boucle. Cette expression est frequemment utilisee pour 
initialiser le compteur de boucle a I'aide de I'operateur d'affectation (exemple : $i = 5). 

expressi on2 : expression evaluee au debut de chaque passage de boucle. Si le resultat de revaluation 
est true, le bloc d'instructions de la boucle est de nouveau execute. Dans le cas contraire, le programme 
sort de la boucle pour executer les instructions qui suivent le bloc. Cette expression est frequemment 
utilisee pour tester le compteur de boucle a I'aide d'un operateur de comparaison (exemple : $i > 0). 

expressions : expression evaluee a la fin de chaque boucle. Cette expression est frequemment utilisee 
pour incrementer ou decrementer le compteur de boucle a I'aide d'un operateur d'auto-incrementation 
ou de decrementation (exemple : i --). 



Code 19-34 : exemple de bloc for : 

for (i=5;i>0;i--) 
{ 

document. writeC'Encore "+i+" tour(s) a faire <br>"); 
} 

document. writeC'Voila, c'est enfin termine"); 

//ci-dessus un exemple qui realise la meme boucle que celle donnee en exemple pour 
^♦1 'instruction "while". 

Structures de boucle avec for-in 

La boucle f or-i n est dediee a la manipulation des objets. Elle permet en effet de lire rapi- 
dement les differentes proprietes d'un objet sans avoir a ecrire beaucoup de code. 

Tableau 19-15 Instruction de boucle for-in 



Syntaxe 

foripropriete in objet) 
I 
instruction utilisant propriete; 
[} 

Voici un exemple utilisant l'instruction for-in pour afficher les proprietes de l'objet 
voiture. 
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Code 19-35 : exemple d'utilisation de la boucle for-in : 

//creation et configuration de l'objet voiture 
var voiture = new ObjectO; 
voiture.couleur=" rouge" ; 
voiture. puissance="200ch" ; 

//affichage des proprietes de l'objet avec for-in 
for(var propriete in voiture)! 

document. writetpropriete + ' = ' + voiture[propriete] + '<br>' 
} 

Le code 19-35 affiche les informations ci-dessous a l'ecran : 



couleur = rouge 
puissance = 200ch 

Structures d'exception try-catch 

Lors de son execution, un programme peut generer des erreurs (appelees aussi des excep- 
tions). JavaScript permet desormais de capturer ces exceptions susceptibles de survenir et 
de les controler en utilisant une structure try-catch. 

Ainsi, si le bloc de code de l'instruction try ne genere aucune exception, le bloc catch est 
ignore et le programme continue apres la structure try-catch. Dans le cas contraire, si une 
exception survient, le programme est de suite deroute vers le bloc catch qui est execute a 
son tour. II est ainsi possible d'imbriquer de multiples structures try-catch afin de tester 
successivement plusieurs instructions comme dans le programme que nous utilisons pour 
definir quelle est la bonne instruction pour instancier un objet XMLHttpRequest selon le 
navigateur utilise (voir code 19-36). 

Tableau 19-16 Instruction d'exception try-catch 



Syntaxe 

try 
{ 



//code a tester 
} catch (Erreur) { 

//traitement a appliquer en cas d'exception sur le code tester 
} 



Code 19-36 : exemple d'utilisation de l'instruction try-catch : 

try {//test pour les navigateurs : Mozilla, Opera... 

resultat= new XMLHttpRequest( ) ; 
} 

catch (Error) { 
try {//test pour les navigateurs Internet Explorer > 5.0 

resultat= new ActiveXObjectt "Msxml2.XMLHTTP" ) ; 
} 

catch (Error) { 
try {//test pour le navigateur Internet Explorer 5.0 

resultat= new ActiveXObjectC'Microsoft.XMLHTTP") ; 
} 

catch (Error) { 
resultat= nul 1 ; 
} 
} 
} 
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Gestion du DOM 
avec JavaScript 



Ce chapitre est dedie a la programmation du DOM (Document Object Model). Vous y trou- 
verez les descriptions de nombreux attributs et methodes qui vous permettront de mani- 
puler des elements HTML, XML, des styles CSS et des evenements a l'aide de JavaScript. 



Les specifications du DOM 



Le DOM permet de modifier dynamiquement une page XHTML sans avoir a sollicker le 
serveur avec des requetes HTTP traditionnelles. Ces techniques de programmation sont 
frequemment employees dans les applications Ajax pour actualiser les elements d'une 
page XHTML sans necessiter son rechargement. Mais le DOM ne sert pas exclusivement 
a manipuler les elements d'un document XHTML, il peut aussi interagir sur tout type de 
document texte structure, comme le XML ou encore sur les styles ou les evenements 
d'un document XHTML. 

Dans la version 2 du DOM, la normeW3C est d'ailleurs divisee en plusieurs parties. 
Lune d'entre elles, le DOM Core, concerne plus particulierement les documents XML et 
autres derives (dont le XHTML) alors qu'une autre, le DOM HTML, est dediee exclusi- 
vement aux documents HTML. Une troisieme partie, le DOM Style, concerne la gestion 
des styles des elements. Enfin, nous verrons par la suite qu'une quatrieme partie, le DOM 
Events, specifie les differents evenements utilisables dans une page Web et la maniere de 
les gerer avec JavaScript. 



L'arbre DOM 



Avec le DOM, les elements d'un document sont organises hierarchiquement, on parle 
alors d'arbre DOM du document. La version 2 du DOM definit tout un ensemble de 
methodes qui permettent de naviguer dans cet arbre et de modifier les attributs et les 
contenus des elements qui le constitue. 
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L'arbre DOM, une representation du document en memoire 

Lors du chargement d'un document texte structure (comme le XHTML ou le XML), le 
navigateur analyse les differents types de texte qui le constituent (balises, attribut, 
valeur ...) et leur assigne a chacun un « noeud » puis les organise hierarchiquement afin 
de former l'arbre DOM. L'arbre ainsi constitue est ensuite memorise dans la memoire de 
l'ordinateur et correspond a la representation reelle de ce que nous voyons a l'ecran du 
navigateur. 

Le DOM propose aussi une serie de methodes qui permet de modifier tous ces noeuds, 
voire d'en ajouter ou d'en supprimer. Ainsi, selon les methodes utilisees par l'applica- 
tion, la representation du document en memoire (l'arbre DOM) pourra diverger de celle 
du code source initial. II est done important de bien prendre conscience que la repre- 
sentation de l'arbre DOM peut etre differente de celle du code source du meme document 
en fonction des methodes du DOM qui auront ete utilisees par 1' application apres son 
chargement initial (voir figure 20-1). 
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Figure 20-1 

A gauche : code source de la page Web. A droite : representation de l'arbre DOM. Vous remarquerez que, malgre 
leurs similitudes, les deux representations ne sont pas complement identiques (le contenu de la balise HI ayant 
ete modifie par une methode DOM apres le chargement de la page). 



Terminologie d'un arbre DOM 

• Un arbre est la structure hierarchique qui relie les nceuds entre eux. Sa « racine » 
correspond au document (document) et son « tronc » a 1' element HTML (html) dans le 
cas d'une page Web. Les noeuds du document constituent le reseau de « branches » de 
l'arbre. 



Un noeud (node) est le composant de base resultant de la conversion de chaque zone de 
texte d'un document lors de son chargement dans le navigateur. II existe differents 
types de noeuds, dont les principaux sont : element (type 1), attribut (type 2) ou texte 
(type 3). 

Le parent (parentNode) d'un noeud est toujours unique. C'est celui duquel est issu le 
noeud courant. 
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Les enfants (childNodes) d'un nceud Element sont les differents nceuds de type 
element ou texte issus du noeud element courant. Parmi les enfants d'un nceud, on peut 
distinguer le premier enfant (firstChild) et le dernier enfant (lastChild). A noter qu'un 
noeud attribut n'a pas de noeud enfant et que celui d'un texte est toujours vide. 

Les noeuds freres (sibling) sont les noeuds qui ont le meme parent. Parmi les freres 
d'un noeud courant, on peut distinguer le nceud frere immediatement place avant 
(previousSibling) le nceud courant et celui place immediatement apres (next- 
Sibling). 



Figure 20-2 

Relations entre les 
differents nceuds 
composant un arbre 



ParentNode 




previousSibling /\ nextSibling 



0- 

firstChild 









lastChild 

^ 



child Nodes[x] 



Organisation d'un nceud element XHTML 

Dans les documents XHTML et XML, nous retrouverons tres frequemment des nceuds 
de type Element. Si nous nous referons a la structure d'un element XHTML (revoir la 
balise hi de la figure 20-1 par exemple), nous constatons qu'elle est composee d'un 
contenu et d'attributs (ces deux composants etant optionnels). 

Si nous transposons cette structure dans 1' arbre DOM, nous constatons que son organisa- 
tion est semblable (voir figure 20-3). II faut toutefois preciser que si le nceud attribut est 
bien rattache au nceud element, il n'est cependant pas considere comme un de ses enfants 
et n'apparaitra pas dans la liste childNodes du nceud element mais sera accessible par 

attributes. 
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D' autre part, il est tres important de comprendre que le contenu textuel d'un nceud 
element n'est pas accessible par son attribut nodeValue (qui est egal a null) mais par 
1' intermediate d'un nceud de type texte supplementaire qui aura pour seule fonction de 
contenir le texte du nceud element concerne (voir figure 20-3). 



Figure 20-3 

Naeud element 
et ses nasuds 
attribut et texte 



<h1 id="message">Bonjoijr«s/h1> 



attributes 



nodeValue = "message 

nodeName = "id 

r noeud 

■ attribut 



nodeType = 2 




nodeName = "H1" 
nodeType = 1 



firstChild 



nodeValue = "Bonjour" 
nodeName = "#text" 

nodeType = 3 



Pour acceder au texte du noeud h1 r il faut utitiser : 
noeudElement. firstChild. nodeValue = "Bonjour" 
Pour acceder a la vateur de f'attribut id, it faut utiliser : 
noeudElement. attributes. id. nodeValue = "message" 



Attributs de balise et attributs de noeud 

Attention a ne pas confondre les attributs d'une balise (comme id) avec les differents attributs (ou 
proprietes) d'un objet noeud (comme nodeVal ue ou nodeName). 



Pour illustrer la transposition d'une page XHTML dans un arbre DOM, reportez vous a 
la figure 20-4 et au code 20-1 correspondant au code source de la page concernee. 

Pour bien comprendre le fonctionnement de 1' arbre DOM, nous vous invitons a ouvrir 
cette page exemple avec Firefox (disponible dans les ressources en ligne du repertoire 
chapitre 20). Utilisez ensuite l'onglet DOM de 1' extension Firebug pour derouler 1' arbre 
de la meme maniere que dans la figure 20-4. 

Code 20-1 : page exemple ArbreDOM.html : 

<?xml version="1.0"?> 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" 
*»" http://www.w3.org/TR/xhtrnl 1/ DTD/xhtml 1-transitional .dtd"> 
<html xmlns=" http://www.w3.org/1999/xhtinl "> 
<head> 
<meta http-equiv="Content-Type" content="text/html ; charset=utf-8" /> 
<title>Titre de la page</title> 
</head> 
<body> 

<hl id="message">Bonjour</hl> 
</body> 
</html> 
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Figure 20-4 
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+ 2 \n (noeud #fexf : n"existe pas avec IE) 



Connaitre les informations dun noeud 



Contraintes d'usage des attributs et methodes du DOM 
Classes de I'objet : 

Les differents attributs et methodes presentes ci-apres sont lies a des classes differentes (Node, Node- 
List, Element ou Document), il faut done s'assurer que I'objet auquel vous allez les appliquer correspond 
bien a cette classe. 
Document HTML ou XML : 

Nous vous avons precise precedemment que les specifications du DOM sont decoupees en differentes 
parties. Le DOM Core etant applicable a tous les documents XML et le DOM HTML est specifique aux 
documents HTML. Meme si la majorite des attributs et methodes peuvent etre utilises de la meme 
maniere avec un document XML et avec un document HTML, il en existe neanmoins certains qui devront 
etre appliques exclusivement aux documents HTML (comme innerHTML ou les attributs d'affichage : 
offsetLeft ...). 

Pour vous guider dans ce choix, nous rappellerons ces contraintes d'usage au debut de chacune des 
presentations de cette partie. 



La liste des attributs et methodes n'est pas exhaustive 

Pour simplifier leur usage, nous avons choisi de ne vous presenter ici que les principaux attributs et 
methodes du DOM. Certains d'entre eux n'etant pas portables (utilisables avec tous les navigateurs) ou 
peu utilises en pratique ne seront pas presentes mais nous vous invitons a vous referer a la documenta- 
tion officielle du W3C si vous desirez avoir la liste complete des attributs et des methodes du DOM. 
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nodeType : type du naeud 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les nceuds). 
Document : XML ou HTML. 



L' attribut nodeType permet de connaitre le type du noeud. La valeur du type est comprise 
entre 1 et 12 (voir le tableau 20-1 enumerant les 4 principaux types). 

Tableau 20-1 Les 4 principales valeurs de nodeType 



Valeur de nodeType 


Type de noeud correspondant 


1 


Element 


2 


Attribute 


3 


Text 


9 


Document 



Pour recuperer le type d'un noeud, il suffit d'appliquer l'attribut a l'objet noeud en utilisant 
la syntaxe pointee ci-dessous (monNoeud etant l'objet noeud concerne). 

Syntaxe : 

monNoeud. nodeType ; 



Utiliser nodeType pour f iltrer les noeuds separateur 

LAPI DOM du navigateur Internet Explorer n'est pas standard et ignore les noeuds texte vides utilises 
comme separateur entre chaque element contrairement aux autres navigateurs compatibles W3C 
(comme Firefox). Selon le navigateur utilise lors de la manipulation d'un noeud, il faut done souvent tester 
s'il s'agit du noeud element ou d'un noeud separateur pour assurer la compatibilite pour tous les navigateurs 
(revoir la figure 20-4 pour localiser les noeuds texte qui encadrent le nceud hi). 
Pour filtrer ces noeuds separateurs, une solution simple consiste a utiliser une structure de test if ( ) 
comparant le nodeType du noeud que Ton desire utiliser avec la valeur du type d'un nceud element, soit 1 
(voir exemple de code ci-dessous). Vous serez ainsi sur que les instructions de manipulation du nceud 
placees entre les accolades seront appliquees a un noeud element et non aux noeuds separateurs qui 
I'encadrent (voir aussi le code 20-9 des exemples de la partie sur les attributs qui permettent de se depla- 
cer dans un arbre si vous desirez avoir une application pratique de cette technique) : 
if (monNoeud. nodeType==l) { ... } 



nodeName : nom du nceud 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les nceuds). 
Document : XML ou HTML. 



L'attribut nodeName permet de connaitre le nom du noeud pour certains types specifiques 
(attribut ou element par exemple). Pour les autres types, cet attribut renverra le type du 
noeud precede d'un caractere # (document ou texte par exemple). Les valeurs des noms 
etant differentes pour chaque type de noeud, il existe aussi 12 valeurs possibles de cet 
attribut selon le type du noeud (voir le tableau 20-2 avec les 4 principales valeurs). 
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Tableau 20-2 Les 4 principales valeurs de nodeName 



Valeur de nodeName 


Type de noeud correspondant 


Nom de la balise de I'element 


Element 


Norn de I'attribut 


Attribute 


#text 


Text 


#document 


Document 



Pour recuperer le nom d'un noeud, il suffit d'appliquer I'attribut a l'objet noeud en utili- 
sant la syntaxe pointee ci-dessous (monNoeud etant l'objet noeud concerne). 

Syntaxe : 

monNoeud. nodeName ; 

nodeValue : valeur du noeud 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les noeuds). 
Document: XML ou HTML. 



L' attribut nodeValue permet de connaitre la valeur du noeud pour certains types specifi- 
ques (attribut ou texte par exemple). Pour les autres types, cet attribut renverra l'etat nul 1 
(Document ou Element par exemple). Les valeurs des noeuds etant differentes pour 
chaque type de noeud, il existe aussi 12 valeurs possibles de cet attribut selon le type du 
noeud (voir le tableau 20-3 avec les 4 principales valeurs). 

Tableau 20-3 Les 4 principales valeurs de nodeValue 



Valeur de nodeValue Type de noeud correspondant 

null Element 

Valeur de I'attribut Attribute 

Valeur du texte Text 

null Document 

Pour recuperer la valeur d'un noeud, il suffit d'appliquer l'attribut a l'objet noeud en utilisant 
la syntaxe pointee ci-dessous (monNoeud etant l'objet noeud concerne). 

Syntaxe : 

monNoeud. nodeValue ; 

A noter que pour recuperer le contenu d'un noeud element, (comme Bonjour dans 
1' exemple du noeud element suivant <p>Bonjour</p>) ilne fautpas utiliser I'attribut de la 
valeur du noeud element mais acceder a la valeur du noeud enfant de type texte comme 
l'illustre le code ci-dessous (monNoeudElement etant l'objet noeud de type element 
concerne) : 

monNoeudElement.fi rstChi Id. nodeValue ; 
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id : valeur de I'identifiant d'un nceud 



Contraintes d'usage : 

Classe : attribut de la classe Element (applicable a un objet document exclusivement). 
Document : XML ou HTML. 



L' attribut id permet de connaitre la valeur de I'identifiant d'un nceud. Si le nceud n'a pas 
d'identifiant, l'utilisation de cet attribut ne genere pas d'erreur, dans ce cas la valeur 
retournee est "". 

Pour recuperer I'identifiant d'un nceud, il suffit d'appliquer 1' attribut a l'objet nceud en 
utilisant la syntaxe pointee ci-dessous (monNoeud etant l'objet nceud concerne). 

Syntaxe : 

| monNoeud. id ; 

className : valeur de la classe d'un nceud 



Contraintes d'usage : 

Classe : attribut de la classe Element (applicable a un objet document exclusivement). 
Document : XML ou HTML. 



L' attribut cl assName permet de connaitre la valeur de la classe d'un nceud. Si le nceud n'a 
pas de classe, l'utilisation de cet attribut ne genere pas d'erreur, dans ce cas la valeur 
retournee est "". 

Pour recuperer la classe d'un nceud, il suffit d'appliquer l'attribut a l'objet nceud en utilisant 
la syntaxe pointee ci-dessous (monNoeud etant l'objet nceud concerne). 

Syntaxe : 

monNoeud. className ; 

offsetXxxx : dimensions et coordonnees d'un Element 



Contraintes d'usage : 

Classe : attribut de la classe Element (applicable a un objet document exclusivement). 
Document : HTML. 



Le DOM HTML propose une serie d' attributs qui permettent de connaitre la dimension 
(hauteur ou largeur) ou la position (espace separant l'element parent des bords de 
1' element concerne) d'un noeud element HTML : voir le tableau 20-4 avec les differents 
attributs disponibles. Ces attributs concernent la presentation d'un element, dans ces 
conditions ils ne peuvent pas etre utilises dans un document XML et ne sont disponibles 
que pour un element de document HTML. Les attributs de position d'un element 
s'appuient sur son element parent, aussi il est souvent utile de pouvoir acceder a cet 
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element parent. Pour cela, le DOM HTML propose aussi l'attribut offsetParent pour 
acceder a cet element parent. 

Tableau 20-4 Les principaux attributs de position d'un element 



Attribut de I'element Designation 


offsetHeight 


Dimension : hauteur d'un element 


offsetWidth 


Dimension : largeur d'un element 


offsetLeft 


Position : espace separant I'element parent du bord gauche de I'element concerne 


offsetTop 


Position : espace separant I'element parent du bord superieur de I'element concerne 


offsetParent 


Element parent : pointe sur I'element hierarchiquement superieur de I'element concerne. 
Si il n'y a pas d'element superieur, la valeur null est renvoyee. 



Pour recuperer la valeur d'une dimension ou d'une position d'un element HTML, il suffit 
d'appliquer l'attribut a l'objet El ement en utilisant la syntaxe pointee ci-dessous (monEl ement 
etant l'objet Element concerne). 

Syntaxe : 

monElement. offsetWidth ; 

Acceder a un noeud de I'arbre 

getElementByld(id) : recupere un element par son identifiant 



Contraintes d'usage : 

Classe : methode de la classe Document (applicable a un objet document exclusivement). 
Document: XML ou HTML. 



II est facile de referencer un objet Element si Ton connait son identifiant a l'aide de la 
methode getElementByldO. L'identifiant d'un element etant toujours unique dans un 
meme document, il suffit d'appeler cette methode en passant le i d de I'element en parametre. 
La methode retourne alors I'element unique correspondant. 

Syntaxe : 

document. getElementById(nomDe Identifiant) ; 

Dans l'exemple ci-dessous, nous utilisons cette technique pour afficher le texte 
contenu dans un element div d'identifiant « message ». L' information sera affichee 
dans la console de Firebug. 



console. info( 'Le message est:"+ document 

*». getElementById( "message" ).fi rstChild.nodeVal ue) ; 



Code JavaScript 20-2 : 

Affiche dans la console de Firebug la ligne suivante : 

Le message est: Bonjour 
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Si la balise ci-dessous est dans la page HTML 

<di v id="message">Bonjour</div> 



Attention : 

Avec cette methode, nous realiserons toujours la recherche dans tout le document (applicable uniquement 
a la classe Document). II ne faut done pas oublier de faire preceder I'appel de la methode du prefixe 
« document ». 



getElementsByTagName(tagName) : recupere la liste d'elements 
d'une meme balise 



Contraintes d'usage : 

Classe : methode de la classe Document ou Element (applicable a un objet document ou a un objet 

element). 

Document : XML ou HTML. 



La methode qui permet d'acceder a un element par son identifiant etant limitee a un 
element unique (un meme id ne peut etre applique qu'a un seul element), il est quelque- 
fois interessant de pouvoir acceder a une liste d'elements possedant le meme nom de 
balise. 



Attention au « s » : 

Contrairement a la methode getElementByld(id) qui ne renverra toujours qu'un seul element car un id est 
unique dans un document, il n'en est pas de meme avec les methodes getElementsByTa- 
gName(tagName) et getElementsByName(name) qui, elles utilisent le nom d'une balise ou celui de 
I'element pour les recherches et pourront done renvoyer une liste de plusieurs elements correspondants 
aux criteres. II est done normal que les noms des methodes "getElements..." prennent un « s » dans ce 
cas : ne I'oubliez pas dans vos futurs programmes. 



La methode getElementsByTagNameO permet d'effectuer ce type de recherche, il suffit 
d'appeler cette methode en passant le nom de la balise recherchee en parametre. La 
methode retourne alors un tableau des differents elements correspondants. 

Syntaxe : 

document. get El ementsByTagName(nomDeBalise) ; 



Parcourir une liste de nceuds 

Pour parcourir tous les noeuds du tableau retourne par la methode getElementsByTagNameO ou getEle- 
mentsByName(), vous pouvez par exemple utiliser le code ci-dessous (dans notre exemple la liste a ete 
prealablement sauvegardee dans une variable HsteElements) : 

for(var 1=0 ; i<l isteElements.l ength ; i++) { 
var element = 1 isteElements[i ] ; 
console. info( "L'element "+i+" est "+ element); 
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Recherche dans tout le document 



Dans l'exemple ci-dessous (voir fichier exempleTagNamel.html), nous utilisons cette 
technique pour rechercher, dans le document entier, tous les elements dont le nom de 
balise est 1 1 (dans ce cas, nous appliquerons la methode a l'objet document). 

Code JavaScript 20-3 : 

function test( ){ 
var listeElements=document.getElementsByTagName("li"); 

forCvar i=0 ; i<l isteElements. length ; i++) { 
var element = 1 isteElements[i] ; 
console. info( "L'element "+i+" est "+ element. firstChild. nodeValue) ; 



window. onload = test; 
Afhche dans la console les lignes ci-dessous : 



L'element est 


option Al 


L'element 1 est 


option A2 


L'element 2 est 


option Bl 


L'element 3 est 


option B2 



Si les balises ci-dessous sont dans la page HTML 

<ul id="listeA" > 

<li>option AK/li> 

<li>option A2 </li> 
</ul> 
<ul id="listeB" > 

<li>option BK/li> 

<li>option B2 </li> 
</ul> 



Recherche dans un element particulier 

Cette meme methode peut aussi s'appliquer a un objet El ement specifique. Dans ce cas, il 
faudra appliquer cette methode directement a l'element et la recherche sera effectuee 
uniquement sur les elements qui constituent la descendance de l'element concerne. 

Si nous appliquons cette seconde technique a l'exemple precedent, le code JavaScript 
serait alors le suivant (voir fichier exempleTagName2.html). 

Code JavaScript 20-4 : 

function test( ){ 
var zoneRecherche=document.getElementById("l isteA") ; 
var 1 isteElements=zoneRecherche.getElementsByTagName("li"); 
for(var i=0 ; i<l isteElements. length ; i++) ( 
var element = listeElements[i] ; 

console. infoC'L'element "+i+" est "+ element.fi rstChild.nodeVal ue) ; 
} 
} 
window. onload = test; 
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Affiche dans la console les lignes ci-dessous : 

L'element est : option Al 
L'element 1 est : option A2 

Si les balises dans la page HTML sont les memes que dans le precedent exemple. 



getElementsByName(name) : recupere la liste d'elements 
portant le meme nom 



Contraintes d'usage : 

Classe : methode de la classe Document (applicable a un objet document exclusivement). 
Document : XML ou HTML. 



La methode getEl ementsByName( ) permet d'effectuer une recherche sur la valeur de l'attri- 
but name d'un element. II suffit d'appeler cette methode en passant la valeur recherchee en 
parametre. La methode retourne alors un tableau des differents elements correspondants. 

Syntaxe : 

document. get El ementsByName(nomDeElement) ; 

Dans l'exemple ci-dessous (voir fichier exempleName.html), nous utilisons cette technique 
pour rechercher tous les elements d'une serie de boutons radio dans le document (les 
attributs name des boutons de cette serie seront done identiques et egaux a la valeur choix). 
Nous profiterons aussi de la boucle for pour faire un test a chaque tour de boucle et verifier 
si l'un des boutons radio est coche. 

Code JavaScript 20-5 : 

function test(){ 
var listeElements=document. getEl ementsByName( "choix") ; 

for(var i=0 ; i<l isteElements. length ; i++) { 
var element = 1 isteElements[i ] ; 

console. info( "L'element "+i+" est "+ element. value) ; 
if (element. checked) 
console. infoC'L'element selectionne est "+ element. value) : 
} 
} 
window. onload = test; 

Affiche dans la console les lignes ci-dessous : 



L'element est 


choixl 




L'element 1 est 


choix2 




L'element 2 est 


choix3 





Si les balises dans la page HTML sont les suivantes 



<p id="zoneChoix"> 
<input type="radio" 
<input type="radio" 
<input type="radio" 

</p> 



name="choix" value="choixl" />Choixl<br /> 
name="choix" value="choix2" />Choix2 <br /> 
name="choix" value="choix3" />Choix3 <br /> 
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Lors du chargement initial de la page, aucun des choix n'est encore selectionne. 
L' instruction de test if (element, checked) renverra done une reponse negative a chaque 
tour de la boucle for car aucun bouton radio n'est coche. Par contre, si vous selectionnez 
maintenant le choix 2, par exemple, et que vous reactualisez la page, vous obtiendrez 
alors les lignes ci-dessous : 




getAttribute(attributeName) : recupere la valeur d'un attribut 



Contraintes d'usage : 

Classe : methode de la classe Element (applicable a un objet element exclusivement). 
Document : XML ou HTML. 



La methode getAttri bute( ) permet de recuperer la valeur d'un attribut. II suffit d'appeler 
cette methode en passant le nom de l'attribut recherche en parametre (attributeName). 
La methode retourne alors la valeur correspondante a l'attribut. 

Syntaxe : 

elementPere.getAttribute(nomDeAttribut) ; 

Dans l'exemple ci-dessous (voir fichier exempleGetAttribute.html), nous utilisons cette 
technique pour rechercher la valeur de l'attribut value de la (ou les) case(s) a cocher 
selectionnee(s). 

Pour cela nous utiliserons la methode getElementsByTagNameC'input") pour recuperer la 
liste des elements input du document. Ensuite, nous recuperons la valeur de chaque case 
dans une variable valeurCase avec la methode element, get Attribute ("value"). Enfin, nous 
testons si la case est cochee et affichons dans ce cas la valeur de la case concernee. 

A noter qu'une autre alternative plus simple serait d'utiliser l'attribut val ue des elements 
pour recuperer directement la valeur de l'attribut au lieu de la methode el ement .getAttri - 
bute( "value"). Aussi, en pratique, cette methode est principalement utilisee avec des 
documents XML pour lesquels les attributs d'un element ne sont pas directement acces- 
sibles par le biais ses proprietes DOM. 

Code JavaScript 20-6 : 

function test( ){ 

var 1 isteEl ement s^document. getElementsByTagNameC'input") ; 
fortvar i=0 ; i<l isteElements. length ; i++) { 
var element = 1 isteElements[i ] ; 
var valeurCase = element. getAttributeC'value") : 

if (element. checked) console. infoC'L'element "+valeurCase+" est selectionne "); 
} 
} 
window. onload = test; 
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Affiche dans la console les lignes ci-dessous si la case de 1' article B est cochee 
L'element articleB est selectionne 

Si les balises du code source de la page HTML sont les suivantes : 

<input name="choixl" type="checkbox" id="choixl" value="articleA" /> 
article A<br /> 

<input name="choix2" type="checkbox" id="choix2" value="articleB" /> 
article B<br /> 



length : indique le nombre determent d'une liste de nceuds 



Contraintes d'usage : 

Classe : attribut de la classe NodeList (applicable exclusivement sur un objet NodeList). 
Document : XML ou HTML. 



Les deux methodes getElementsByNameO et getElementsByTagName( ) que nous venons de 
presenter, mais aussi l'attribut chi 1 dNodes que nous verrons plus loin, retournent une liste 
d'elements resultat dans un objet NodeLi st. Pour exploiter les elements de cette liste, il est 
pratique de connaitre le nombre d'elements contenus dans le tableau NodeList (comme 
nous l'avons deja utilise dans le script pour parcourir la liste de nceuds, revoir encadre 
precedent). Pour obtenir cette information, il suffit d'appliquer l'attribut length a l'objet 
NodeLi st comme dans l'exemple ci-dessous (voir fichier exempl eLength . html ) : 

Syntaxe : 

listeElements. length ; 

Code JavaScript 20-7 : 

Balises de la page HTML : 



var listeElements=document.getElementsByTagName("l i") ; 

console. info( "Le nombre d'elements li est "+ listeElements. length) ; 



<ul id="listeA" > 
<li>option AK/li> 
<1i>option A2 </li> 

</ul> 

La console affichera alors la ligne suivante 

Le nombre d'elements li est 2 



Se deplacer dans les noeuds de I'arbre 

Les attributs de cette partie permettent de se deplacer dans I'arbre d'un document. Afin 
de bien comprendre le fonctionnement de ces differents attributs, nous vous conseillons 
de revoir la partie consacree a la terminologie d'un arbre DOM presentee au debut de ce 
chapitre. 

Dans les exemples de cette partie, nous allons utiliser un tableau HTML de 3 cellules. La 
figure 20-5 ci-dessous illustre la hierarchie des elements qui composent ce tableau afin 
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que vous puissiez plus facilement vous reperer dans les emplacements effectues dans 
l'arbre grace aux differents attributs presentes. 



Figure 20-5 

Hierarchie de la 
structure du tableau 
HTML utilisee dans 
les exemples de cette 
partie 



<table> 



<tbocly> 



<tr id="ligne1"> 




} 



elementTR 




1 2 3 4 5 6 




#text <td> #text <td> #texf <td> #texf 



#fexf #text ffiext 

A1 A2 A3 



L- childNodf 

I 

firstChild 
avec 

■ = nodeValue 



childNodes : recupere la liste des nceuds enfants 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les noeuds). 
Document: XML ou HTML. 



L' attribut chi 1 dNodes permet de recuperer la liste des nceuds enfants d'un element dans un 
tableau de variables. Si 1' element concerne n'a pas d'enfant, l'attribut renvoie alors un 
tableau vide. 

Syntaxe : 

el ementPere . chi 1 dNodes [ i ndi ce] ; 

Dans l'exemple ci-dessous (voir fichier exempleChildNodes.html) nous affichons successi- 
vement dans une fenetre d'alerte tous les elements recuperes a l'aide de l'attribut child- 
Nodes applique a l'element TR d'un tableau HTML de trois cellules. Nous effectuerons 
une premiere serie de tests avec le navigateur Firefox puis avec le navigateur Internet 
Explorer (en utilisantl' extension IE Tab de Firefox par exemple). 
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Code JavaScript 20-8 : 

function test(){ 
var elementTR=document.getElementById( "1 ignel") ; 
for(var 1=0 ; KelementTR.childNodes. length ; 1++) { 
var elementTD = elementTR.childNodes[i]; 

alertC'L'element "+i+" est "+elementTR.childNodes[i] .nodeName) ; 
} 
} 
window. onload = test; 

Balises de la page HTML : 

<table width="400" border="l" eel 1 spaci ng="0"> 
<tr id="lignel"> 
<td>AK/td> 
<td>A2</td> 
<td>A3</td> 
</tr> 
</table> 

Resultats obtenus avec Firefox : 




Resultats obtenus avec Internet Explorer : 



L 


e 


ement 





est 


TD 


L 


e 


ement 


1 


est 


TD 


L 


e 


ement 


2 


est 


TD 



Comme nous l'avons vu precedemment, l'arbre DOM des noeuds etant different avec le 
navigateur Internet Explorer (IE ignore les nceuds texte separateurs alors que Firefox les 
integre dans l'arbre), il convient de modifier notre code en faisant un test sur le type de 
noeud avant de leur appliquer le traitement voulu (voir fichier exempl eChi 1 dNodes2 . html). 

Desormais, comme nous sommes stir de n' avoir que des elements TD lors du traitement, 
nous pouvons maintenant exploiter sans generer d'erreur la valeur du contenu de chaque 
cellule (firstChild.nodeValue) en 1' affichant dans chaque message de laboite d'alerte. 

Code JavaScript 20-9 : 

function test(){ 
var elementTR=document.getElementByIdCl ignel") ; 
for(var i=0 ; KelementTR.childNodes. length ; i++) { 

var elementTD = elementTR.childNodes[i] ; 

if (elementTD. nodeType == 1) 
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alertC'L'element "+elementTR.childNodes[i ] .nodeName+" contient la valeur 
"+elementTR.childNodes[i] .firstChild.nodeValue) ; 



window. onload = test; 

Si nous renouvelons nos essais avec les deux navigateurs, nous constatons que nous obtenons 
maintenant des resultats identiques pour les deux navigateurs : 




parentNode : retourne le nceud parent 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les noeuds). 
Document: XML ou HTML. 



L' attribut parentNode d'un noeud retourne son nceud parent. Si toutefois le nceud concerne 
n'a pas de nceud parent (ce qui est rare), 1' attribut retourne l'etat nul 1 . 

Syntaxe : 

noeud. parentNode ; 

Dans l'exemple ci-dessous (voir fichier exempleParentNode.html) nous affichons successi- 
vement dans la console de Firebug 1'identiriant commun de l'element TR, pere des 3 cellules 
TD du tableau HTML. 

Code JavaScript 20-10 : 

function test( ){ 
var 1 isteTD=document.getElementsByTagName("td") ; 
fortvar i=0 ; i<l isteTD. length ; i++) { 

var elementTD = 1 isteTDCi H ; 

var parentDeTD = elementTD. parentNode; 

console. infoCL'element parent de la cellule TD "+elementTD.firstChild.nodeValue+" 

**est identifie par le id : "+ parentDeTD. id) ; 



window. onload = test; 

Balises de la page HTML : 

<table width="400" border="l" cellspacing="0"> 
<tr id="lignel"> 
<td>AK/td> 
<td>A2</td> 
<td>A3</td> 
</tr> 
</table> 
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Resultats obtenus 



L'element parent de 


la eel 


lule TD Al est 


identifie par 


le 


id 


lignel 


L'element parent de 


la eel 


lule TD A2 est 


identifie par 


le 


id 


lignel 


L'element parent de 


la eel 


lule TD A3 est 


identifie par 


le 


id 


lignel 



nextSibling : retourne le noeud here suivant 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les nceuds). 
Document : XML ou HTML. 



L' attribut nextSibl ing d'un noeud retoume le noeud frere situe immediatement apres le noeud 
courant. Si le noeud concerne n'a pas de noeud suivant, l'attribut retoume l'etat nul 1 . 

Syntaxe : 

noeudCourant. nextSibl ing ; 

A noter qu'ici aussi, il faut tenir compte de la difference des arbres DOM generes par les 
navigateurs (IE ignore les noeuds texte separateurs alors que Firefox les integre dans 
l'arbre). Pour pallier ce probleme nous ajoutons un test du type de l'element retourne par 
le premier attribut nextSibl ing. Si celui-ci n'est pas un element (noeud de type 1), nous 
appliquons un second deplacement au noeud suivant pour court-circuiter le noeud separateur 
de Firefox. 

II existe une autre solution pour que votre traitement de l'arbre puisse fonctionner sous 
IE comme sous Firefox. Cette technique realise un test de l'objet al 1 specifique a Micro- 
soft qui n'est defini que sous IE. La valeur du test (document .all) renverra done true avec 
IE et false pour les autres navigateurs. Ainsi, avec cette technique, vous pourrez disso- 
cier le traitement a effectuer avec IE et celui de Firefox comme dans l'exemple du 
code 20-12 qui represente une solution alternative au code 20-11. 

Dans l'exemple ci-dessous (voir fichier exempleNextSibling.html) nous affichons le noeud 
suivant du noeud d'identifiant eel 1 ul eA2 dans la console de Firebug. 

Code JavaScript 20-1 1 : 

function test(){ 

var noeudCourant=document.getElementById("celluleA2") ; 

var noeudSuivant=noeudCourant. nextSibl ing ; 

if (noeudSuivant.nodeType != 1) 
var noeudSuivant=noeudSuivant. nextSibl ing ; 

console. info( "L'element suivant de la cellule A2 est "-HioeudSuivant.id) ; 
} 
window. onload = test; 

Code JavaScript 20-12 : solution alternative au code 20-11 

function test(){ 
var noeudCourant=document.getElementById("celluleA2") ; 
if (document. all ) 

var noeudSuivant=noeudCourant. nextSibling ; 
else 
var noeudSuivant= noeudCourant. nextSibling. nextSibling ; 
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I console. info( "L'element suivant de la cellule A2 est "-HioeudSuivant.id) ; 
} 
window. onload = test; 

Balises de la page HTML : 

<table width="400" border="l" cellspacing="0"> 
<tr id="lignel"> 
<td id="celluleAl">AK/td> 
<td id="ce11uleA2">A2</td> 
<td id="celluleA3">A3</td> 
</tr> 
</table> 

Resultat obtenu dans la console : 



L'element suivant de la cellule A2 est celluleA3 



previousSibling : retourne le nceud frere precedent 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les noeuds). 
Document : XML ou HTML 



L' attribut previousSibling d'un nceud retoume le nceud frere situe immediatement avant le 
nceud courant. Si le nceud concerne n'a pas de nceud precedent, l'attribut retourne l'etat null. 

Syntaxe : 

noeudCourant. previousSibling 

A noter qu'ici aussi, il faut tenir compte de la difference des arbres DOM generes par les 
navigateurs (IE ignore les noeuds texte separateurs alors que Firefox les integre dans 
l'arbre). Pour pallier ce probleme nous ajoutons un test du type de l'element retourne par 
le premier attribut previousSibling. Si celui-ci n'est pas un element (nceud de type 1), 
nous appliquons un second deplacement au nceud precedent pour court-circuiter le nceud 
separateur de Firefox. 

Dans l'exemple ci-dessous (voir fichier exemplePreviousSibling.html) nous affichons le 
nceud precedent du nceud d'identifiant eel 1 ul eA2 dans la console de Firebug. 

Code JavaScript 20-13 : 

function test( ){ 

var noeudCourant=document.getElementById("cel 1 uleA2" ) ; 

var noeudPrecedent=noeudCourant. previousSibling ; 

if (noeudPrecedent.nodeType != 1) 
var noeudPrecedent=noeudPrecedent. previousSibling ; 

console. info( "L'element precedent de la cellule A2 est "-HioeudPrecedent.id) ; 
} 

window. onload = test; 

Balises de la page HTML : 

|<table width="400" border="l" cellspacing="0"> 
<tr id="lignel"> 
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<td id="celluleAl">AK/td> 
<td id="celluleA2">A2</td> 
<td id="celluleA3">A3</td> 
</tr> 

</table> 

Resultat obtenu dans la console : 

L'element precedent de la cellule A2 est celluleAl 



firstChild : retourne le premier noeud enfant 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les nceuds). 
Document : XML ou HTML. 



L' attribut fi rstChild d'un noeud retourne le premier noeud enfant du noeud courant. Si le 
noeud concerne n'a pas de noeud enfant, l'attribut retourne l'etat nul 1 . 

Syntaxe : 

noeudPere. firstChild ; 

A noter qu'ici aussi, il faut tenir compte de la difference des arbres DOM generes par les 
navigateurs (IE ignore les noeuds texte separateurs alors que Firefox les integre dans 
l'arbre). Pour pallier ce probleme nous ajoutons un test du type de l'element retourne par 
l'attribut firstChild. Si celui-ci n'est pas un element (noeud de type 1), nous appliquons 
un deplacement au noeud suivant avec l'attribut nextSi bl ing pour court-circuiter le noeud 
separateur de Firefox. 



'-HioeudPrecedent.id) 



Dans l'exemple ci-dessous (voir fichier exempleFirstChild.html) nous affichons 
premier noeud enfant du noeud d'identifiant 1 1 gnel dans la console de Firebug. 

Code JavaScript 20-14: 

function test(){ 

var noeudCourant=document.getElementById("cel luleA2" ) ; 

var noeudPrecedent=noeudCourant.previousSibling ; 

if (noeudPrecedent.nodeType != 1) 
var noeudPrecedent=noeudPrecedent.previousSibling ; 

console. infoC'L'element precedent de la cellule A2 est 
} 
window. onload = test; 

Balises de la page HTML : 

<table width="400" border="l" cell spacing="0"> 
<tr id="lignel"> 
<td id="celluleAl">AK/td> 
<td id="celluleA2">A2</td> 
<td id="celluleA3">A3</td> 
</tr> 
</table> 

Resultat obtenu dans la console : 



le 



L'element articleB est selectionne 
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lastChild : retourne le dernier nceud enfant 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les noeuds). 
Document : XML ou HTML. 



L' attribut lastChild d'un nceud retourne le dernier noeud enfant du noeud courant. Si le 
noeud concerne n'a pas de noeud enfant, l'attribut retourne l'etat nul 1 . 

Syntaxe : 

noeudPere. lastChild 

A noter qu'ici aussi, il faut tenir compte de la difference des arbres DOM generes par les 
navigateurs (IE ignore les nceuds texte separateurs alors que Firefox les integre dans 
l'arbre). Pour pallier ce probleme nous ajoutons un test du type de l'element retourne par 
l'attribut lastChild. Si celui-ci n'est pas un element (nceud de type 1), nous appliquons 
un deplacement au nceud precedent avec l'attribut previousSibl ing pour court-circuiter le 
nceud separateur de Firefox. 

Dans l'exemple ci-dessous (voir fichier exempleLastChild.html) nous affichons le dernier 
nceud enfant du nceud d'identifiant 1 ignel dans la console de Firebug. 

Code JavaScript 20-15 : 

function test(){ 

var noeudCourant=document.getElementById("lignel") ; 

var dernierEnfant=noeudCourant. lastChild ; 

if (dernierEnfant.nodeType != 1) 
var dernierEnfant=dernierEnfant. previousSibl ing ; 

console. infoC'Le dernier element enfant de la ligne 1 est "+dernierEnfant.id) ; 
} 
window. onload = test; 

Balises de la page HTML : 

<table width="400" border="l" cellspacing="0"> 
<tr id="lignel"> 
<td id="celluleAl">AK/td> 
<td id="celluleA2">A2</td> 
<td id="celluleA3">A3</td> 
</tr> 
</table> 

Resultat obtenu dans la console : 



L'element articleB est selectionne 



hasChildNodes : retourne true s'il y a des noeuds enfants 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les noeuds). 
Document: XML ou HTML. 



L'attribut hasChi 1 dNodes d'un nceud retourne la valeur booleenne true si le nceud courant 
possede au moins un nceuds enfants et f al se dans le cas contraire. 
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Syntaxe : 

noeudPere.hasChildNodes 

Dans l'exemple ci-dessous (voir fichier exempleHasChildNodes.html) nous verifierons que 
le nceud d'identifiant lignel a bien des enfants avant de lui appliquer un traitement. 
La reponse du test est affichee dans la console de Firebug. 

Code JavaScript 20-16 : 

function test(){ 
var noeudCourant=document.getElementById("l ignel") ; 
if (noeudCourant.hasChildNodes) 
{ 
console. infoC'Nous confirmons que 1 "element de la ligne 1 a bien des enfants"); 
var dernierEnfant=noeudCourant.lastChild ; 
if (dernierEnfant.nodeType != 1) 

var dernierEnfant=dernierEnfant.previousSibl i ng ; 
console. info( "Le dernier element enfant de la ligne 1 est "+dernierEnfant.id) ; 
} 

else 
console. infoC'Attention, 1 'element de la ligne 1 n'a pas d'enfants"); 
} 
window. onload = test; 

Balises de la page HTML : 

<table width="400" border="l" cell spacing="0"> 
<tr id="lignel"> 
<td id="celluleAl">AK/td> 
<td id="celluleA2">A2</td> 
<td id="celluleA3">A3</td> 
</tr> 
</table> 

Resultat obtenu dans la console : 

Nous confirmons que 1 'element de la ligne 1 a bien des enfants 

Le dernier element enfant de la ligne 1 est celluleA3 



Creez des fonctions de navigation dans I'arbre pour capitaliser vos codes 

Afin de capitaliser son code et eviter de refaire les mimes procedures a chaque utilisation d'un attribut 
DOM, il est interessant de creer ses propres fonctions de deplacement en integrant evidemment les tests 
du type des elements retournes afin que la fonction puisse etre utilisee avec tous les navigateurs de la 
meme maniere. 

Pour illustrer la creation de ce type de fonction, nous vous proposons de creer une fonction qui permet 
d'acceder au dernier element enfant d'un nceud particulier qui sera passe en parametre de la fonction (voir 
code 20-17). Vous pourrez ensuite creer vous-meme sur ce meme modele d'autres fonctions utilisables 
avec tous les navigateurs pour vous deplacer dans I'arbre DOM. 



Code JavaScript 20-17 : fonction dernierEnfant(nteudCourant) 



function dernierEnfant(noeudCourant){ 
if (noeudCourant.hasChildNodes) 
{ 
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var dernierEnfant=noeudCourant.l astChild ; 
if (dernierEnfant.nodeType != 1) 
var dernierEnfant=dernierEnfant.previousSibling ; 
} 

else 

dernierEnfant= null ; 
return dernierEnfant; 
} 

Pour exploiter cette fonction, vous pouvez par exemple utiliser le code suivant : 

Code JavaScript 20-18 : 

function test( ){ 

var noeudCourant=document.getElementById("lignel") ; 

dernierEnfant=dernierEnfant(noeudCourant) ; 

console. infoCLe dernier element enfant de la ligne 1 est "+dernierEnfant.id) ; 
} 
window. onload = test; 

Balises de la page HTML : 

<table width="400" border="l" cellspacing="0"> 
<tr id="lignel"> 
<td id="celluleAl">AK/td> 
<td id="celluleA2">A2</td> 
<td id="celluleA3">A3</td> 
</tr> 
</table> 

Resultat obtenu dans la console : 

Le dernier element enfant de la ligne 1 est celluleA3 

Pour information, il existe une seconde alternative au code 20-17 qui s'appuyait sur le 
type de l'element a traiter pour solutionner les probleme de compatibilite entre IE et Fire- 
fox. Celle-ci utilise une structure i f qui teste l'objet al 1 specifique a Microsoft (voir code 
20-19). Ainsi le test (document. all) renvoie une valeur true uniquement dans le cas d'un 
navigateur IE et nous pouvons ainsi appliquer un traitement different selon le type de 
navigateur. 

Code JavaScript 20-19 : 

function dernierEnfant(noeudCourant) { 
if (noeudCourant.hasChildNodes) 
{ 

//pour IE 

if (document. all ) var dernierEnfant=noeudCourant.lastChild ; 
//pour FF 

else var dernierEnfant=noeudCourant.lastChild.previousSibl ing ; 
} 
else 
dernierEnfant= null ; 
return dernierEnfant; 
} 
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Modifier les noeuds de I'arbre 

Dans les parties precedentes, nous avons vu comment recuperer des informations d'un 
nceud et se deplacer de noeud en noeud dans un arbre DOM, nous allons maintenant vous 
presenter les differentes methodes qui vont vous permettre de modifier I'arbre en agissant 
sur les elements (creation, modification, duplication, suppression), sur les attributs des 
elements, sur le contenu des elements voire meme directement sur les styles des elements. 

createElement(nomBalise) : creation d'un element 



Contraintes d'usage : 

Classe : attribut de la classe Document (applicable au nceud document exclusivement ) 
Document : XML ou HTML. 



La methode create El ement ( nomBal i se) permet de creer un nceud de type element et dont le 
nom de la balise sera le texte passe en parametre lors de l'appel de la methode. Des sa 
creation, il est possible de modifier ses attributs mais il faudra ensuite le rattacher a 
I'arbre par une methode appendChildO ou insertBeforeO pour qu'il apparaisse dans la 
page HTML. 

Syntaxe : 

document. createEl ement (nomDe La Balise) ; 

Exemple de creation d'un nouvel element dont le nom de balise sera TD suivi de la confi- 
guration de son attribut id : 

Code JavaScript 20-20 : 

I el ementTD=document. createEl ement ("TD"); 
elementTD.id="cel 1 uleA4" ; 

createTextNode(contenu) : creation d'un noeud texte 



Contraintes d'usage : 

Classe : attribut de la classe Document (applicable au nceud document exclusivement ) 
Document : XML ou HTML. 



La methode createTextNode(contenu) permet de creer un noeud de type texte et dont son 
contenu sera le texte passe en parametre lors de l'appel de la methode. Des sa creation, il 
est possible de modifier ses attributs mais il faudra ensuite le rattacher a un element deja 
present dans I'arbre par une methode appendChildO ou insertBeforeO pour qu'il appa- 
raisse dans la page HTML. 

Syntaxe : 

document. createTextNodet con tenuDuTexte) ; 
Exemple de creation d'un nouveau noeud texte dont le contenu est "A4" : 
Code JavaScript 20-21 : 

noeudTexte=document . createTextNodeC "A4" ) ; 
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setAttribute(nom,valeur) : creation ou modification d'un attribut 



Contraintes d'usage : 

Classe : attribut de la classe Element (applicable au nceud element exclusivement ) 
Document : XML ou HTML. 



La methode setAttribute(nom, valeur) permet de creer ou de modifier l'attribut d'un 
nceud de type element. Pour cela deux parametres seront necessaires, le premier (nom) 
indiquera le nom de l'attribut a creer ou a modifier et le second (valeur) contiendra la 
valeur a donner a l'attribut precede mment nomine. 

Syntaxe : 

noeudPere.setAttribute(nomDeAttribut,valeurDeAttribut) 

Pour illustrer 1' utilisation de cette methode, nous vous proposons de creer un attribut de 
classe a l'element de la cellule A2 (voir fichier exempleSetAttribute.html). Cette action 
sera declenchee par l'appui sur un bouton qui changera la couleur du fond de la cellule 
concernee en rouge. 

A noter que la gestion des classes etant differente sous IE et Firefox, nous devrons 
doubler la commande afin que la modification soit effective pour les deux navigateurs 
(les methodes ne generant pas d'erreur dans IE comme dans Firefox, il n'est pas neces- 
saire d'utiliser un detecteur de navigateur comme if (document, all ) dans ce cas). 

Code JavaScript 20-22 : 

function test( ){ 
el ementTD=document . get El ementBy Id( "eel 1 ul eA2" ) ; 
elementTD.setAttribute("class","classeCellule");//pour FF 
elementTD.setAttribute("className","classeCellule");//pour IE 

} 

Style de la page : 

I.classeCellule { 
background-color: #FF0000; 
1 

Balises de la page HTML : 

<table width="400" border="l" cellspacing="0"> 
<tr id="lignel"> 
<td id="celluleAl">AK/td> 
<td id="cellu1eA2">A2</td> 
<td id="celluleA3">A3</td> 
</tr> 
</table> 
<input type="button" val ue="CHANGE LE STYLE DE A2" onclick="test( ) ;"> 

appendChild(noeud) : insertion d'un nceud apres le dernier enfant 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les nceuds). 
Document: XML ou HTML. 
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La methode appendChild(noeud) permet d'inserer le noeud passe en parametre apres le 
dernier noeud enfant du noeud auquel il est applique. 

Syntaxe : 

noeudPere.appenChild(noeud) ; 

Pour illustrer son usage, nous allons 1' exploiter pour relier le noeud texte cree precedem- 
ment au noeud element dans un premier temps. Puis nous insererons l'ensemble apres le 
dernier element enfant de l'element TR du tableau (soit done apres la cellule A3). 

Ce traitement etant declenche par l'appui sur un bouton, vous pourrez constater son 
action lors de vos tests par l'ajout d'une cellule supplementaire nommee A4 apres la 
cellule A3 (voir fichier exempleAppendChild.html). 

Code JavaScript 20-23 : 

function test(){ 

//creation du noeud element 

el ementTD=document . create El ement ( "TD" ) ; 

elementTD.id="cel 1 uleA4" ; 

//creation du noeud texte 

noeudTexte=document.createTextNode("A4") ; 

//attachement du noeud texte au noeud element 

el ementTD . appendChi 1 d( noeudTexte) ; 

//attachement du noeud element a la suite des autres cellules 

elementTR=document.getElementById("lignel") ; 

el ementTR. appendChi 1 d( el ementTD) ; 
} 

Balises de la page HTML : 

<table width="400" border="l" eel 1 spaci ng="0"> 
<tr id="lignel"> 
<td id="celluleAl">Al</td> 
<td id="celluleA2">A2</td> 
<td id="celluleA3">A3</td> 
</tr> 
</table> 
<input type="button" value="AJOUTER UNE CELLULE" oncl ick="test( ) ;"> 



insertBefore(nouveauNoeud,noeud) : insertion d'un noeud 
avant un autre noeud 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les nceuds). 
Document : XML ou HTML. 



La methode insertBefore(nouveauNoeud, noeud) permet d'inserer le noeud passe dans le 
premier parametre (nouveauNoeud) avant un autre noeud, qui lui, sera passe dans le second 
parametre de la methode (noeud). 

Syntaxe : 

noeudPere.insertBefore( nouveauNoeud, noeud) ; 
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Pour la demonstration, nous allons reprendre la base de l'exemple precedent mais nous 
allons cette fois ajouter la nouvelle cellule A4 avant la premiere cellule Al du tableau. 

Ce traitement etant declenche par l'appui sur un bouton, vous pourrez constater son 
action lors de vos tests par l'ajout d'une cellule supplementaire nommee A4 avant la 
cellule Al (voir fichier exempleInsertBefore.html). 

Code JavaScript 20-24 : 

function test( ){ 

//creation du noeud element 

elementTD=document.createElement( "TD") ; 

elementTD.id="cel 1 uleA4" ; 

//creation du noeud texte 

noeudTexte=document.createTextNode("A4") ; 

//attachement du noeud texte au noeud element 

el ementTD.appendChild(noeudTexte) ; 

//attachement du noeud element a la suite des autres cellules 

elementTR=document.getElementById("lignel") ; 

premierTD=document.getElementById("celluleAl") ; 

el ementTR. i nsertBef ore( el ementTD, premi erTD) ; 
} 

Balises de la page HTML : 

<table width="400" border="l" cellspacing="0"> 
<tr id="lignel"> 
<td id="cellii1eAl">AK/td> 
<td id="celluleA2">A2</td> 
<td id="celluleA3">A3</td> 
</tr> 
</table> 
<input type="button" val ue="AJOUTER UNE CELLULE" onclick="test( ) ; "> 

replaceChild(nouveauNoeud,noeud) : remplacement d'un noeud 
par un autre noeud 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les noeuds). 
Document : XML ou HTML. 



La methode replaceChild(nouveauNoeud, noeud) permet de remplacer le noeud passe dans 
le second parametre (noeud) par un autre noeud, qui lui, sera passe dans le premier para- 
metre de la methode (nouveauNoeud). 

Syntaxe : 

noeudPere.replaceChild( nouveauNoeud, noeud) ; 

Pour la demonstration, nous allons reprendre la base de l'exemple precedent mais nous 
allons cette fois remplacer la premiere cellule Al du tableau par le nouveau noeud de la 
cellule A4. 

Ce traitement etant declenche par l'appui sur un bouton, vous pourrez constater son 
action lors de vos tests par le remplacement de la cellule Al par celle nouvellement creee 
et nommee A4 (voir fichier exempl eRepl aceChi 1 d . html ). 
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Code JavaScript 20-25 



function test(){ 

//creation du noeud element 

el ementTD=document . create El ement ( "TD" ) ; 

elementTD.id="cel 1 ill eA4" ; 

//creation du noeud texte 

noeudTexte=document.createTextNode("A4") ; 

//attachement du noeud texte au noeud element 

elementTD.appendChild(noeudTexte) ; 

//attachement du noeud element a la suite des autres cellules 

el ementTR=document . get El ement By Id ( "1 i gnel " ) ; 

premi erTD=document.getElementById( "eel luleAl") : 

el ementTR. repl aceChi 1 d(el ementTD , premi erTD) ; 
} 



Balises de la page HTML 



<table width="400" border="l" cell spacing="0"> 
<tr id="lignel"> 
<td id="celluleAl">AK/td> 
<td id="celluleA2">A2</td> 
<td id="celluleA3">A3</td> 
</tr> 
</table> 
<input type="button" value="REMPLACE UNE CELLULE" oncl ick="test( ) ; "> 



removeChild(noeud) : suppression d'un noeud 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les nceuds). 
Document : XML ou HTML. 



La methode removeChi 1 d (noeud ) permet de supprimer le noeud passe en parametre qui doit 
etre un noeud enfant du noeud auquel est appliquee la methode. 

Syntaxe : 

noeudPere.insertBefore(noeudEnfantAsupprimer) ; 

Pour la demonstration, nous allons reprendre la base de l'exemple precedent mais nous 
allons cette fois supprimer la premiere cellule Al du tableau. 

Ce traitement etant declenche par l'appui sur un bouton, vous pourrez constater son 
action lors de vos tests par la suppression de la cellule Al (voir fichier exempleRemove- 
Child.html). 

Code JavaScript 20-26 : 

function test(){ 

//suppression du noeud element de la cellule Al 

el ementTR=document . get El ement By Id ( "1 i gnel " ) ; 

premi erTD=document.getElementBy Id ( "eel luleAl") ; 

el ementTR. removeChi ld( premi erTD) ; 
} 
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Balises de la page HTML : 

<table width="400" border="l" cellspacing="0"> 
<tr id="lignel"> 
<td id="celluleAl">AK/td> 
<td id="ce11uleA2">A2</td> 
<td id="celluleA3">A3</td> 
</tr> 
</table> 
<input type="button" val ue="SUPPRIME UNE CELLULE" oncl ick="test( ) ;"> 

Si nous desirons supprimer tous les noeuds enfants d'un element specifique, il faudra 
alors utiliser une boucle whi 1 e de maniere a appliquer la methode removeChi 1 d( ) tant qu'il 
existera des noeuds enfants. Dans l'exemple ci-dessous, nous avons realise une fonction 
supprimerContenu( ) qui supprime tout le contenu d'un element. Cette fonction pourra etre 
reutilisee par la suite dans vos futurs developpements. 

Code JavaScript 20-27 : 

function supprimerContenii(element) { 
if (element != nul 1 ) { 
while(element.firstChild) 

el ement. removeChi 1 d(el ement.fi rstChi 1 d) ; 
} 
} 



cloneChild(option) : clonage d'un noeud 



Contraintes d'usage : 

Classe : attribut de la classe Node (applicable a tous les noeuds). 
Document : XML ou HTML 



La methode cloneChild(noeud) permet de doner le noeud auquel est appliquee la 
methode. Le parametre permet de definir s'il faut inclure les noeuds enfant (option = true) 
ou non (option = f al se) dans le noeud ainsi clone. 

Syntaxe : 

noeudAcloner.cloneChild(true ou false) ; 

Pour la demonstration, nous allons reprendre la base de l'exemple precedent mais nous 
allons cette fois dupliquer la cellule A3 puis la renommer en A4 avant de l'ajouter a la 
suite des cellules actuelles du tableau. 

Ce traitement etant declenche par l'appui sur un bouton, vous pourrez constater son 
action lors de vos tests par l'ajout de la cellule A4 a la suite de la cellule A3 (voir fichier 

exempleCl oneChild.html). 

Code JavaScript 20-28 : 

function test( ){ 

derni erTD=document . get El ement By Id( "eel 1 ul eA3" ) ; 
//clonage du noeud element de la cellule A3 
clonageTD=dernierTD.cloneNode(true) ; 
//configuration de la cellule clonee 
clonageTD.fi rstChild.nodeVal ue="A4" ; 
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clonageTD.firstChild.id="celluleA4" ; 
//ajout de la cellule clonee a la suite de A3 
elementTR=document.getElementById("lignel") ; 
elementTR.appendChild(clonageTD) ; 
} 

Balises de la page HTML : 

<table width="400" border="l" eel 1 spacing="0"> 
<tr id="lignel"> 
<td id="celluleAl">AK/td> 
<td id="celluleA2">A2</td> 
<td id="celluleA3">A3</td> 
</tr> 
</table> 
<input type="button" value="CLONER UNE CELLULE" oncl ick="test( ) ; "> 



style : modifier le style d'un nceud Element 



Contraintes d'usage : 

Classe : attribut de la classe Element (applicable aux noeuds element exclusivement). 
Document : HTML. 



L' attribut styl e permet de lire, de modifier ou de supprimer le style du nceud. 

Pour manipuler le style d'un nceud il suffit d'appliquer 1' attribut style a l'objet nceud 
suivi de la propriete du style desire en utilisant la syntaxe pointee ci-dessous (monNoeud 
etant l'objet nceud courant). 

Syntaxe : 

| monNoeud. styl e.nomDuStyle ; 

Les noms des styles pouvant etre geres avec le DOM sont semblables a ceux que nous 
avons coutume d'utiliser dans les feuilles de styles CSS. Toutefois, si le style CSS 
comporte deux mots separes par un tiret, il faut alors supprimer le tiret et fusionner les 
deux mots en mettant en majuscule la premiere lettre du second mot. A titre d'exemple, 
nous indiquons dans le tableau 20-5 quelques styles CSS courants et leur equivalent 
DOM. 

Tableau 20-5 Quelques exemples de styles CSS et leur equivalent DOM 



Style CSS 


Style DOM equivalent 


border-color 


borderColor 


background-color 


backgroundColor 


color 


color 


font-family 


fontFamily 


font-size 


fontSize 


height 


height 


text-al ign 


textAlign 


width 


width 
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Dans l'exemple ci-dessous, nous allons modifier le style de la ligne TR du tableau en lui 
appliquant une couleur de fond rouge. 

Code JavaScript 20-29 : 

function test( ){ 

elementTR=document.getElementById("l ignel") ; 

elementTR. style. backgroundColor = "red"; 
} 

Balises de la page HTML : 

<table width="400" border="l" censpacing="0"> 
<tr id="lignel"> 
<td id="celluleAl">AK/td> 
<td id="celluleA2">A2</td> 
<td id="celluleA3">A3</td> 
</tr> 
</table> 
<input type="button" val ue="CHANGER LE STYLE DE TR" oncl ick="test( ) ; "> 

A noter que pour modifier plusieurs styles d'un meme element, il devient avantageux 
d'utiliser la structure with (element) qui vous evitera de repeter le nom de l'element 
devant chaque declaration de style (voir le code 20-30). 

Code JavaScript 20-30 : 

function test( ){ 
elementTR=document.getElementById("l ignel") ; 
with(elementTR) { 

style. backgroundColor = "red"; 
style. color = "blue"; 
style. fontSize = "30px"; 
} 
} 

Enfin, si vous desirez supprimer un style arin que l'element reprenne son etat initial, il 
suffit d'effacer les precedentes valeurs affectees comme l'illustre le code 20-31. 

Code JavaScript 20-3 1 : 

function test( ){ 
elementTR=document.getElementById("l ignel") ; 
with(elementTR) ( 

style. backgroundColor = ""; 
style. color = ""; 
style. fontSize = ""; 
} 
} 



innerHTML : lecture ou ecriture du contenu d'un element 



Contraintes d'usage : 

Classe : attribut de la classe Element (applicable au nceud element exclusivement). 
Document : HTML. 



L' attribut innerHTML permet de remplacer le contenu d'un element d'une maniere tres 
simple. II permet aussi de lire le contenu d'un element tres facilement meme s'il contient 



Ressources sur les technologies associees 



F 'ARTIE IV 



d'autres balises. Cependant, cet attribut, initialement developpe par Microsoft, ne fait pas 
partie des specifications du W3C DOM et ses implementations peuvent etre assez diffe- 
rentes d'un navigateur a l'autre. II est done conseille, dans la mesure du possible, d'utili- 
ser des techniques alternatives a l'usage de l'attribut inner-HTML utilisant les mefhodes 
standards du DOM, meme si leur utilisation est beaucoup moins simple. 

Pour vous faciliter la tache, nous vous proposons dans le code 20-33 deux fonctions 
(realisees avec les methodes DOM presentees dans cette partie) qui vous permettront de 
rester conforme aux specifications tout en etant presque aussi simple d'utilisation que 
l'attribut inner-HTML. 

Syntaxe : 

noeudElement. inner-HTML ; 

Pour demontrer l'utilisation de cet attribut, nous allons mettre en place deux fonctions. 
La premiere (testlO) utilise inner-HTML en ecriture afin de remplacer le texte de la 
cellule Al par un nouveau texte. La seconde (test2()) utilise inner-HTML pour lire le 
contenu de la cellule A2 et pour l'afficher ensuite dans une fenetre d'alerte (voir fichier 

exempl eInnerHTMLl.html). 

Code JavaScript 20-32 : 

function testl(){ 

var elementA2=document.getElementById( "eel 1 uleAl") ; 

//Ecriture avec innerHTML 

var elementA2.innerHTML="Nouveau contenu de Al"; 
} 
function test2(){ 

var elementA2=document.getElementById( "cell uleA2") ; 

//Lecture avec innerHTML 

var contenuA2=elementA2. innerHTML; 

alertC'le contenu de la cellule 2 est : "+contenuA2) ; 
} 

Balises de la page HTML : 

<table width="400" border="l" cell spacing="0"> 
<tr id="lignel"> 

<td id="celluleAl">AK/td> 

<td id="celluleA2">A2</td> 

<td id="celluleA3">A3</td> 
</tr> 
</table> 

<input type="button" val ue="ECRITURE DANS CONTENU DE LA CELLULE Al" onclick 
*»="testl();"> 
<input type="button" value="LECTURE DU CONTENU DE LA CELLULE A2" oncl ick="test2( ) ; "> 

Pour illustrer les solutions alternatives a innerHTML, nous proposons maintenant de realiser 
les deux memes fonctions que precedemment mais avec des fonctions DOM standards 
(voir fichier exempleInnerHTML2.html). 

Par la suite les deux fonctions remplacerContenuO et supprimerContenu( ) pourront etre 
avantageusement placees dans un fichiers JS externe afin d'eviter de surcharger inutilement 
le code de la page (voir pour exemple les ateliers du chapitre 10). 



Gestion du DOM avec JavaScript 



Chapitre 20 



Code JavaScript 20-33 : 

function testHH 
remplacerContenu( "eel 



uleAl" ."Nouveau contenu de Al"); 



function test2( ) { 
var elementA2=document.getElementById( "celluleA2") ; 
var contenuA2=elementA2.firstChild.nodeValue; 
alertC'le contenu de la cellule 2 est : "+contenuA2) ; 
} 

//fonctions DOM en alternative a innerHTML 
function remplacerContenudd, texte) { 
var element = document. getElementByld(id) ; 
if (element != nul 1 ) { 
supprimerContenut element) ; 

var nouveauContenu = document. createTextNode(texte) ; 
element.appendChild(nouveauContenu) ; 
} 
} 

function supprimerContenu(element) { 
if (element != nul 1 ) { 
while(el ement.fi rstChild) 

el ement . removeChi 1 d ( el ement . f i rstChi Id); 
} 
} 



Gerer les evenements avec DOM Events 

Jusqu'a present, nous avons utilise les methodes et attributs des parties DOM Core 
(XML), DOM HTML et DOM Style pour connaitre les informations d'un noeud, acceder 
a un noeud particulier de l'arbre ou encore se deplacer dans l'arbre. Nous vous proposons 
maintenant d' exploiter les proprietes de DOM Events pour controler les evenements du 
navigateur, du clavier et de la souris. 



Les evenements et leur gestionnaire 

Le principe d'une application interactive est de reagir a un evenement pour changer le 
contenu ou la forme de la page Web affichee dans le navigateur. II existe de nombreux 
evenements ; certains seront inities par l'utilisateur par le biais d'une action sur le clavier 
(keypress ou keyup par exemple) ou a l'aide de la souris (mouseover ou mouseout par exem- 
ple) alors que d'autres peuvent etre declenches par le navigateur lui-meme pour signaler 
qu'une page est completement chargee, par exemple (1 oad). 

Quelle que soit l'origine de l'evenement, le processus de son traitement est semblable. 
Des que l'evenement survient, il est detecte et un programme developpe prealablement 
pour le traiter est execute. 

Le systeme qui detecte un evenement se nomme un gestionnaire d' evenement. Avec DOM 
Events, le gestionnaire d'evenement est materialise par une propriete de l'objet qu'il doit 
controler et dont 1' appellation est fabriquee par la concatenation du nom de l'evenement 
et du prefixe "on" (voir le tableau 20-6). Par exemple, le gestionnaire de l'evenement cl i ck 
(correspondant a un clic de souris) se nommera oncl i ck. 
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Tableau 20-6 Correspondances entre quelques i 


evenements et leurs gestionnaires 


Evenements Gestionnaires Type de noeud Actions detectees 
d'evenement controlable 
(proprietes du noeud) 


bl ur 


onbl ur 


Element 


Perte de focus de I'element 


change 


onchange 


Element 


Modification de la valeur de I'element 


click 


onclick 


Element 


Clic de souris sur I'element 


dblclick 


ondblclick 


Element 


Double clic de souris sur I'element 


focus 


onfocus 


Element 


Obtention du focus de I'element 


keydown 


onkeydown 


Element 


Touche enfoncee 


keypress 


onkeypress 


Element 


Touche pressee 


keyup 


onkeyup 


Element 


Touche relachee 


load 


onload 


Document, 
Element 


Chargement de la page 


mousedown 


onmousedown 


Element 


Bouton de la souris enfonce 


mousemove 


onmousemove 


Element 


Deplacement de la souris 


mouseout 


onmouseout 


Element 


La pointeur de la souris est sorti de I'element 


mouseover 


onmouseover 


Element 


Passage du pointeur de la souris au dessus de 
I'element 


mouseup 


onmouseup 


Element 


Relachement du bouton de la souris 


resize 


onresize 


Document, 
Element 


Redimensionnement de la page ou de I'element 


scroll 


onscroll 


Document, 
Element 


Utilisation du defilement de la page 


unload 


onunload 


Document, 
Element 


Lorsqu'on quitte la page 



L'objet que doit controler le gestionnaire d'evenement peut etre un element HTML (div 
ou input...) s'il s'agit de detecter un clic de souris sur une zone ou encore I'element 
racine de la page (Document), ou s'il s'agit de detecter le chargement de la page dans le 
navigateur par exemple (voir le tableau 20-6). 

Une fois l'objet defini, le gestionnaire d'evenement lui sera applique en utilisant la 
syntaxe pointee (objet. onclick avec objet correspondant a une reference d'un element 
div de la page par exemple). Le but de cette propriete, correspondant au gestionnaire 
d'evenement concerne, est de memoriser le nom de la fonction qui prendra en charge le 
traitement lorsque l'evenement surviendra. Pour cela, il suffit simplement de lui affecter 
le nom de la fonction (attention, le nom de la fonction ne doit pas avoir de parentheses 
sinon c'est le resultat de la fonction qui serait affecte et non son nom) comme dans 
l'exemple du code 20-34. 

II ne reste plus ensuite qu'a declarer la fonction de traitement dont nous venons d'enre- 
gistrer le nom dans la propriete de l'objet pour que le gestionnaire soit operationnel. 

Syntaxe : 

noeud. propriete = fonction ; 
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avec : 

noeud pouvant etre le document ou une reference a un element du document (a l'aide de 
getEl ementByldC ) par exemple) selon le type d'evenement (voir tableau 20-6). 

propriete est une des proprietes DOM Events de l'objet noeud (soit l'un des gestionnaires 
d'evenements du tableau 20-6). 

fonction est le nom de la fonction appelee pour traiter l'evenement et qui a ete creee 
prealablement par le developpeur. 

Code 20-34 : voir fichier gesti onnai rel . html : 

<div id="zoneA" >Cliquez ici </div> 

<script type="text/javascript"> 
function afficheClic(){ 

alertC'CLIC"); 
} 

objetCl iquable=document.getElementById("zoneA") ; 
objetCliquable.onclick=afficheCl ic; 
</script> 

Dans l'exemple ci-dessus, la page contient une zone div dont l'identifiant est "zoneA" et 
dans laquelle on a place le texte "cliquez ici". Dans un script place apres cette zone, 
nous avons declare la fonction qui prendra en charge le traitement de l'evenement (aff i - 
cheCl i c( )) puis nous avons configure le gestionnaire d'evenement en le liant avec l'objet 
a controler et en lui affectant le nom de la fonction de traitement. Si nous appelons cette 
page et que nous cliquons sur le texte de la balise div, une boite d'alerte doit alors appa- 
raitre contenant le texte "CLIC" (voir figure 20-6). 



1 Document sans nom - Mozilla Firefox 
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Figure 20-6 

Test du gestionnaire d'evenement du code 20-34 
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Si nous observons le nceud de l'objet objetCliquable dans l'arbre DOM avec Firebug, 
nous pouvons constater que la propriete onclick (aussi appelee gestionnaire d'evene- 
ment) de l'objet contient la fonction de traitement afficheClicO que nous lui avons 
affecte dans le code 20-34 (voir figure 20-6). 



Ancienne facon de configurer un gestionnaire d'evenement 

Avant I'apparition du DOM, on avait coutume d'utiliser des gestionnaires d'evenements inseres directe- 
ment dans les balises de la page HTML (voir exemples du code 20-35). Desormais, avec les evenements 
DOM Events, il convient d'utiliser des gestionnaires d'evenements qui ne seront pas declares dans les 
balises HTML mais integres dans le code JavaScript (voir code 20-34). Cette nouvelle technique permet 
d'ameliorer la lisibilite et la maintenance de I'application mais elle permet surtout de separer parfaitement 
la structure et le contenu HTML du code JavaScript. 



Code 20-35 : voir fichier gestionnaire0.html : 

<head> 

<script type="text/javascript"> 

function afficheClic(){ 

alertCCLIC"); 
} 

</script> 
</head> 
<body> 

<di v onclick="afficheClic()">Cl iquez ici </div> 
</body> 



L'objet Event et ses proprietes 

Lorsqu'un evenement se produit, un objet Event est cree. Cet objet dispose de plusieurs 
proprietes qui permettent de connaitre des informations complementaire a l'evenement. 

Ainsi, si vous utilisez un gestionnaire d'evenement lie a la souris (onmouseover, 
onmousedown. . .) vous pourrez connaitre la position du curseur au moment de l'evenement, 
ou encore le bouton qui a ete utilise. De meme que pour les evenements du clavier 
(keydown, keyup...), il vous sera possible d'identifier la touche qui a ete pressee ou si des 
touches selecteur (Al t, Ctrl ou Ma j) ont ete actionnees en meme temps (voir les exemples 
de proprietes de l'objet Event du tableau 20-7). 



Tableau 20-7 Exemples de quelques proprietes de l'objet Event 



Proprietes de 


l'objet Event 


Description 


altkey 




Renvoie true si la touche Alt a ete actionnee 


Ctrl Key 




Renvoie true si la touche Ctrl a ete actionnee 


shi ft Key 




Renvoie true si la touche Shift a ete actionnee 


keyCode 




Renvoie le code Unicode de la touche actionnee 


cl ientX 




Coordonnee X de la souris 


clientY 




Coordonnee Y de la souris 


screenX 




Coordonnee X de l'evenement 


screenY 




Coordonnee Y de l'evenement 
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Recuperation de Event dans la fonction de traitement 

Pour exploiter les proprietes de l'objet Event, il faut en disposer dans la fonction de trai- 
tement de l'evenement. Pour cela, la methode de recuperation sera differente selon le 
navigateur utilise. 

Pour les navigateurs conformes aux specifications du W3C, comme Firefox, la recupera- 
tion de l'objet est automatique. En effet, lors de l'evenement, le gestionnaire transmet 
l'objet event en parametre dans la fonction de maniere implicite sans arguments a confi- 
gurer dans l'appel de la fonction. Ainsi, dans le code ci-dessous (code 20-36) l'objet 
event et ses proprietes sont disponibles et pourront etre utilises dans le traitement de 
l'evenement. 

Code 20-36 : voir fichier exempl eEventl . html : 

<div id="zoneA" >Cliquez ici </div> 



<script type="text/javascript"> 

function afficheCl ic(event){//val able uniquement avec nav. W3C 
alert ("clientX="+event.clientX+" et clientY="+event.clientY) ; 

} 

objetCl iquable=document.getElementById("zoneA") ; 

ob j etCl i quabl e . oncl i ck=af fi cheCl i c ; 
</script> 



Figure 20-7 

Recuperation de 
I 'objet Event et de 
ses proprietes 
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Si nous testons la page du code 20-36 dans Firefox, une fenetre d'alerte doit s'ouvrir 
lorsque Ton clique sur le texte "cliquez ici" et afficher les coordonnees X et Y de la 
souris au moment de Taction (voir figure 20-7). Par contre, si nous basculons dans IE (en 
cliquant sur le bouton de l'extension IE Tab par exemple) et que nous realisons le meme 
test, nous constatons que le systeme ne fonctionne plus. 

En effet, dans le cas d'Internet Explorer l'objet n'est pas passe automatiquement en para- 
metre a la fonction et il faut utiliser l'objet window. event directement dans le corps de la 
fonction pour disposer de ses proprietes comme l'illustre le code 20-37. 

Code 20-37 : voir fichier exempl eEvent2 . html : 

<div id="zoneA" >Cliquez ici </div> 

<script type="text/javascript"> 
function afficheClic( ){ //valable uniquement avec IE 
alertC'cl ientX="+window. event. clientX+" et cl ientY="+window. event. clientY) ; 
} 
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IobjetCl iquable^document. get Element By I d( "zoneA") ; 
ob j etCl i quabl e . oncl i ck=affi cheCl i c ; 
</script> 

Si nous testons ce code 20-37 dans IE, nous constatons que cela fonctionne de la meme 
maniere qu'avec Fire fox precedemment (revoir figure 20-7) mais par contre si nous 
testons de nouveau avec le navigateur Firefox, le systeme ne fonctionne plus. II faut done 
trouver une solution pour que nous puissions disposer des proprietes de l'objet Event avec 
les deux navigate urs. 

La solution consiste a utiliser l'operateur OU (symbole 1 1) entre l'objet window. event de 
IE et l'objet event recupere dans le parametre de la fonction avec les navigateurs confor- 
mes au W3C (comme Firefox). Dans le cas d'une utilisation de Firefox, le resultat du test 
sera event car wi ndow. event n'est pas defini dans Firefox et, a l'inverse, avec IE le resultat 
sera window. event. II suffit ensuite d'affecter ce resultat a une variable objet (nominee 
aussi event dans notre exemple) qui sera utilisee dans la suite du traitement pour obtenir 
un systeme compatible avec les deux navigateurs (voir code 20-38). 

Code 20-38 : voir fichier exempleEvent2.html : 

<div id="zoneA" >Cliquez ici </div> 

<script type="text/javascript"> 

function afficheClic(event){ //valable avec FF et IE 

event=window.event| |event;//test des navigateurs 

alert ("clientX="+event.clientX+" et clientY="+event.clientY) ; 
} 

objetCl i quabl e=document.getElementById( "zoneA") ; 

ob jetCl i quabl e . oncl i ck=affi cheCl i c ; 
</script> 
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PHP est un langage de script execute cote serveur (contrairement a JavaScript qui est 
execute cote client). A la fois simple, performant et disposant d'une grande diversite de 
bibliotheques, il permet aussi de se connecter a une base de donnees (comme MySQL). 



Avertissement 

L'objectif de ce chapitre est de vous donner les bases du langage PHP afin que vous puissiez comprendre 
les instructions utilisees dans les differentes ateliers. II n'a done pas la pretention d'etre un cours exhaustif 
sur ce langage. 



La syntaxe de PHP 
Extension de fichier PHP 

Le code PHP doit etre interprets avant d'etre envoye vers le navigateur du client. Pour 
cela, le code source d'un script est toujours enregistre dans un fichier portant l'extension 
.php, pour que l'interpreteur PHP l'identifie et l'analyse (exemple : mapage.php). 

Balises de code PHP 

Le script integre dans la page doit en outre etre encadre par deux balises <?phpet?>, afin 
que l'interpreteur PHP puisse evaluer le code ainsi delimite. 

Lorsque l'interpreteur PHP detecte la balise de debut (<?php), il traite le code qui suit 
comme des instructions PHP et les interprete jusqu'a ce que la balise de fin (?>) soit 
rencontree. Apres celle-ci, il considere que le code est en HTML et l'envoie tel quel au 
navigateur du destinataire. 

Code 21-1 : exemple de script PHP : 

|<?php 
echo "Bonjour"; 
?> 
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Dans l'exemple ci-dessus, la premiere ligne du programme est composee de la fonction 
echo qui affiche Bonjour a l'ecran. La page PHP peut comprendre uniquement ce script ou 
du code HTML dans lequel on a integre le script PHP. Dans ce cas, seul le script PHP 
delimite par ses balises est interprets par l'interpreteur PHP ; le code HTML est quant a 
lui retranscrit a l'identique dans la page finale envoyee au navigateur. 



La fonction d'affichage echo 

Nous abordons I'etude des fonctions integrees PHP un peu plus loin dans ce meme chapitre. Cependant, 
nous allons utiliser la fonction echo des maintenant, afin d'afficher facilement les valeurs des variables ou 
d'emuler du code HTML dans un script PHP. Voici quelques informations sur I'utilisation de cette premiere 
fonction. Sachez pour commencer que la fonction echo est la seule fonction qui ne necessite pas I'usage 
de parentheses pour encadrer ses arguments. Elle permet d'afficher des textes ou des balises HTML s'ils 
sont encadres par des guillemets simples ou doubles. Par exemple, echo "bonjour"; ou echo 
'bonjour' ; affichent le mot « bonjour » dans la page Web. echo "<br>" ; emule la balise HTML 
<br> et provoque un retour a la ligne. La commande echo permet egalement d'afficher la valeur d'une 
variable si elle est encadree par des doubles guillemets ou ne comporte pas de guillemets. Par exemple, 
echo "$varl"; ou echo $varl; affichent la valeur de la variable $varl dans la page Web. Attention I 
Si vous passez dans I'argument le nom d'une variable encadree par des guillemets simples, vous affichez 
son nom et non sa valeur. 



Les commentaires 

Dans un script PHP, il est possible de commenter le code PHP en utilisant deux syntaxes 
differentes selon le type de commentaire. 

Commentaires de simple ligne // 

Si on desire inserer un commentaire sur une ligne ou a la fin d'une instruction, il faut 
saisir deux barres obliques // devant celle-ci. 

Code 21-2 : commentaires d'une simple ligne : 

I echo "Bonjour"; //Id c'est un commentaire en bout de ligne 
// Ici c'est un commentaire sur une ligne complete 

Commentaires multilignes /* et */ 

Si on desire inserer plusieurs lignes de commentaire, il faut employer le signe /* au debut 
de la zone de commentaire et */ a la fin de celle-ci. 

Code 21-3 : commentaire multilignes : 

/* 

ceci est un commentaire 

sur plusieurs 

1 ignes 

*/ 



Utiliser les commentaires pour deboguer 

Dans le cadre du depannage d'un script PHP, vous pouvez utiliser les commentaires pour neutraliser une 
ligne ou un bloc de code. Cela permet de tester la page sans interpreter la partie neutralises et d'identifier 
le script qui produit I'erreur. Pour plus d'information sur le debogage d'un programme, reportez-vous au 
chapitre dedie a la mise en oeuvre des programmes. 



PHP 



Chapitre 21 



Les variables 

La variable et sa valeur 

Les variables sont des symboles auxquels on affecte des valeurs. Apres leur affectation, 
vous pouvez modifier les variables a tout moment au cours du deroulement du 
programme. La declaration d'une variable n'est pas obligatoire en PHP car la variable 
peut etre creee lors de sa premiere affectation. De meme, les variables prennent le type 
correspondant a la valeur qui leur est affectee. 

Noms des variables 

Les noms des variables sont toujours precedes du caractere $ et suivis du nom choisi pour 
identifier la variable, qui ne doit comporter que des caracteres alphanumeriques (sauf le 
premier caractere, qui ne doit pas etre un chiffre) ou le caractere souligne _. En pratique, 
il est judicieux de choisir un nom explicite et de se fixer une regie de nommage. 

Types des variables 

Les variables peuvent etre de plusieurs types. 

Tableau 21-1 Types de variable PHP 



Type de Description Exempies 
variable 


Chaine de 
caracteres 

(string) 


Leurs valeurs sont des lettres, chiffres ou symboles. Pour 
affecter une valeur alphanumerique a une variable, vous 
devez I'encadrer par des guillemets. 
A noter : les guillemets peuvent etre doubles (") ou simples ( '). 
Une chaine encadree par des guillemets simples peut conte- 
nd des guillemets doubles et vice versa. Si vous devez integrer 
des guillemets de meme type dans la chaine, il faut les faire 
preceder du caractere d'echappement (\). 


$varl="Dupond" ; 
$var2="bonjour M. $varl"; 
$var3="254"; 
$var4="total=150"; 
$var5= "d'en face" ; 
$var5= 'd\'en face' ; 
$var6= "height="20" ' ; 
$var7= "height=\"20\" " ; 


Numeriques 

entiers 

(integer) 


Leurs valeurs sont uniquement des nombres entiers. Pour 
affecter un entier a une variable, il ne doit pas etre encadre par 
des guillemets. 


$varl=152; 

$var2=5; 

$var3=45+$varl; 


Numeriques 

decimales 

(double) 


Leurs valeurs sont uniquement des nombres decimaux. Pour 
affecter un decimal a une variable, il ne doit pas etre encadre 
par des guillemets. 

A noter : le separateur des valeurs decimales utilise en PHP 
est le point (.) et non lavirgule (,). 


$varl=152.20; 
$var2=124.50; 
$var3=45.85+$varl; 


Booleens 
(boolean) 


Leurs valeurs sont soit true (vrai), soit false (faux). Ces 
valeurs sont affectees a la variable en utilisant une expression 
de condition (exemple : $varl==$var2). 
La valeur false peut etre le 0, une chaine vide "" ou le carac- 
tere "0" et la valeur true toutes les autres valeurs. 


$varl=5 ; //var num 

$var2=2 ; //var num 

$var3=($varl==$var2); 

/* $var3 est une variable booleenne 

et sa valeur est FALSE dans ce cas */ 


Tableaux 
(array) 


Un tableau est une serie de valeurs ayant en commun le 
meme nom de variable. II peut etre indice ou associatif. Le pre- 
mier indice d'un tableau est toujours zero. 


$mois[0]="janvier" ; 
$mois[l]="fevrier" ; 
$mois[2]="mars" ; 


Objets 
(object) 


Les objets (ou classes) sont des ensembles de variables et de 
fonctions definies par I'utilisateur. 


class chrono { 
var $varl=2; 
function debutt ) 
{this->$varl=time()} 

} 
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Comment connaitre le type dune variable ? 

En cours de developpement, vous aurez peut-etre besoin de connaitre le type d'une variable avant de 
I'exploiter. Danscecas, il suffit d'utiliser lafonction gettype($varl), qui retourne letypede la variable 
$varl. En phase de mise au point d'un programme, vous pouvez integrer provisoirement dans votre page 
I'instruction suivante : echo gettype($varl) ;, qui affiche le type de la variable directement dans la 
page Web (string, integer, double, boolean, array, object). 



Variables simples 

La facon la plus simple de manipuler une variable est d'utiliser son nom precede d'un 
caractere $ (exemple : $varl). Cette syntaxe est utilisee aussi bien pour son affectation 
que lors de son utilisation au sein d'une page Web. Dans l'exemple ci-dessous, le type de 
la variable Svarl est numerique comme le type de la valeur qui lui est affectee. 

Code 21-4 : affectation d'une variable : 

//affectation d'une variable simple 

$varl=100; 

//utilisation d'une variable 

echo $varl; // ici la valeur de la variable sera affichee dans la page 



Comment tester si une variable existe ? 

Pour tester si une variable a deja ete affectee, on peut utiliser la fonction isset($varl), qui retourne 
true (vrai) si la variable existe (si elle est deja affectee, meme avec une chaine vide ou un 0) et f al se 
dans les autres cas (si elle n'existe pas encore ou si elle n'a pas ete affectee). A I'inverse, la fonction 
empty ( $varl ) permet de tester si une variable est vide (une variable vide vaut dans le cas d'une varia- 
ble numerique ou est une chame vide dans le cas d'une chaine de caracteres). Si elle est vide, la fonction 
retourne true ; elle retourne f al se dans tous les autres cas. Attention, si la variable testee contient une 
chaine vide ou un 0, les deux fonctions retournent true. 



A titre d'exemple, voici un cas pratique : afin d'eviter de multiples messages d'erreur du 
genre Undefined variable lors de l'affichage de la page, vous serez certainement amene a 
verifier si vos variables sont bien initialisers. Le code suivant (placez-le en debut de 
page) initialise la variable en question uniquement si elle n'existe pas encore (I'instruc- 
tion if ( ) utilisee dans ce test est presentee dans le chapitre). 

Code 21-5 : test d'existence d'une variable : 

if ( !isset($variable)) $variable=" "; 

Variables en tableaux indices 

Les tableaux sont des series de valeurs regroupees sous le meme identifiant. On distingue 
chaque element de la serie par un indice entre crochets (exemple : $tabl[0]). Les 
tableaux qui utilisent des indices numeriques pour distinguer leurs elements s'appellent 
des tableaux indices. Les indices des tableaux commencent toujours a 0. 

Code 21-6 : affichage du contenu d'un tableau : 

echo "<pre>"; 
print_r($agence) ; 
echo "</pre>"; 
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Le contenu du tableau est alors affiche avec la mise en forme suivante : 




Comment connaitre les valeurs contenues dans un tableau ? 

En cours de developpement, vous aurez peut-etre besoin d'afficher rapidement le contenu d'un tableau 
afin de tester votre script. Danscecas, il suffit d'utiliser la fonction print_r($tabl), qui affiche directe- 
ment a I'ecran les differentes valeurs du tableau $tabl. Par exemple, si vous desirez connaitre les valeurs 
du tableau $agence apres son affectation (voir le premier exemple de tableau ci-dessous), vous pouvez 
integrer provisoirement dans votre page I'instruction suivante : 

print_r($agence) 
qui affiche les informations suivantes dans la page Web : 

Array([0]=>Paris [l]=>Lille [2]=>Marseil le) 

Si vous desirez afficher des tableaux plus importants, il est preferable de formater la mise en forme des resul- 
tats a I'aide de la balise HTML <pre> comme dans I'exemple du code 21-6. 



II existe plusieurs manieres d'affecter des valeurs a un tableau. Chaque maniere a ses 
avantages et ses inconvenients et il faut done choisir la methode d' affectation selon le 
contexte du programme. 

La premiere consiste a affecter sa valeur a chaque element en precisant de maniere explicite 
l'indice de l'element. Cette methode est bien adaptee a l'affectation isolee d'une variable 
d'un tableau. L' exemple ci-dessous initialise un tableau qui memorise des noms d'agences. 

Code 21-7 : affectation individuelle de valeurs a un tableau indice : 

I$agence[0]="Paris"; 
$agence[l]="Lille"; 
$agence[2]="Marseil le"; 

La deuxieme consiste a ne pas preciser l'indice de l'element du tableau lors de son 
affectation. Dans ce cas, le premier element affecte est d'indice et les autres sont incre- 
mented au fur et a mesure des affectations. Cette methode est bien adaptee a l'affection d'une 
serie de variables d'un tableau integree dans une structure de boucle. L exemple ci-dessous 
realise exactement la meme affectation que I'exemple precedent utilisant des indices. 

Code 21-8 : affectation auto-incrementee de valeurs a un tableau indice : 

I$agence[]="Paris"; 
$agence[]="Lille"; 
$agence[]="Marseille"; 

La troisieme maniere consiste a utiliser la fonction array ( ). II convient alors de preciser 
les differentes valeurs du tableau dans les arguments de la fonction (separes par des 
virgules). Cette derniere methode est bien adaptee a l'affection initiale et complete d'un 
tableau de variables. L'exemple ci-dessous realise exactement la meme affectation que 
I'exemple precedent utilisant des indices. 
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Code 21-9 : affectation groupee de valeurs a un tableau indice lors de la declaration : 

I //affectation des valeurs 
$agence=array( "Paris", "Li 1 le'V'Marseil le") ; 
//utilisation des variables 
echo $agence[0] ;//affiche "Paris" 

Variables en tableaux associatifs 

II est egalement possible de remplacer les indices par un nom explicite (la cle). Dans ce 
cas, le tableau est dit associatif (exemple $tabl["nom"]). 

Nous avons decline ci-dessous les exemples expliques precedemment, mais en utilisant 
cette fois des tableaux associatifs. 

Code 21-10 : affectation individuelle de valeurs a un tableau associatif : 

|$agence["centre"] = "Paris"; 
$agence["nord"] = "Lille"; 
$agence["sud"] = "Marseille"; 

ou bien : 

Code 21-11 : affectation groupee de valeurs a un tableau associatif lors de la declaration : 

//affectation des valeurs 

$agence=array( 

"centre"=>"Paris" , 

"nord"=>"Lille" , 

"sud"=>"Marseil le" ) ; 

//utilisation des variables 

echo $agence["centre"] ; //affiche "Paris" 

Variables en tableaux multidimensionnels 

PHP ne gere pas les tableaux a deux dimensions. II est toutefois possible de creer une 
telle matrice en declarant une autre structure de tableau a la place des differentes varia- 
bles du tableau principal. Le tableau principal se comporte alors comme un tableau a 
deux dimensions (voir le tableau 21-2 et 1' exemple ci-dessous). 

Tableau 21-2 Matrice equivalent a I'exemple ci-dessous ($tableauprincipal ) 



[x][y] 


[y]=[0] 


[y]=[l] 


[x]=[0] 


Al 


A2 


[x]=[l] 


Bl 


B2 



Code 21-12 : declaration, affectation et utilisation de valeurs dans un tableau a deux 
dimensions : 

//initialisation d'un tableau a 2 dimensions 
$ligneA=array("Al","A2") ; 
$ligneB=array("Bl","B2"); 
$tableauprincipal=array ($1 igneA,$l igneB) ; 
//utilisation de ses elements 



echo $tableauprincipal [0][0] 

echo $tableauprincipal [0][1] 

echo $tableauprincipal [1][0] 

echo $tableauprincipal [1][1] 



//affiche Al 

//affiche A2 

//affiche Bl 

//affiche B2 
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Variables HTTP 

II existe plusieurs families de variables HTTP (variables de formulaire, d'URL, de 
requete, de fichier, de session, de cookie et de serveur). Selon leur famille, les variables 
HTTP seront stockees dans des tableaux differents ($_P0ST[], $_GET[], $_REQUEST[], 
$_FILES[][], $_SESSI0N[], $_C00KIE[], $_SERVER[]). 

Ainsi, pour recuperer une variable envoyee depuis un formulaire, il faut utiliser le tableau 
$_P0ST[] des variables HTTP. Par exemple, si le contenu d'un champ envoye par un 
formulaire en methode POST est nomme nomVar , on doit utiliser la variable HTTP 

$_P0ST[ ' nomVar ' ] pour recuperer sa valeur cote serveur. 

De meme les variables de fichier (lors du telechargement d'un fichier depuis un formu- 
laire en methode POST) suivent les memes regies. Ainsi, si le champ fichier de votre 
formulaire se nomme photo, la variable HTTP $_P0ST[' photo'] contient un tableau 
comportant les differentes informations concernant le fichier telecharge (voir le detail de 
ces information dans le tableau 21-3). 

Tableau 21-3 Les variables HTTP de PHP 



Famille de variable 



variable de formulaire utilisant la 
methode POST. 

variable passee dans I'URL ou 
issue d'un formulaire utilisant la 
methode GET. 



Syntaxe du tableau 
de variables 

$_P0ST['varl'] 



$_GET['varl'] 



Description 



Tableau des variables de formulaire stockant les 
informations recuperees lors d'une requete d'un for- 
mulaire utilisant la methode POST. 

Tableau des variables d'URL qui stooke les valeurs 
transmises par I'URL (exemple : bon- 
jour.php?varl=100) ou saisies par I'internaute 
dans un formulaire utilisant la methode GET. 



variable passee indifferemment 
avec la methode GET ou avec la 
methode POST. 


$_REQUEST['varl'] 


Tableau regroupant les variables de formulaire et 
d'URL. 


variable de session 

(voir le detail dans la partie ci- 

apres consacree aux sessions) 


$_SESSION['varl'] 


Tableau des variables de session qui memorise des 
informations enregistrees pendant toute la duree de 
la visite de I'internaute (la session). 


variable de cookie 


$_C00KIE['varl'] 


Tableau des variables de cookie qui permet de recu- 
perer une information stockee au prealable sur le 
poste client. 



variable de fichier 
Lors du chargement d'un fichier 
depuis un formulaire en methode 
POST, il est stocke dans un 
repertoire temporaire. II convien- 
dra done de le copier ensuite 
dans le repertoire desire 
(a I'aide de la fonction copy 
OU move_upl oaded_f 1 1 e par 
exemple) 



$_FILES[ 'photo'] ['name'] 

correspond au nom du fichier 

$_FILES['photo'] ['type'] 

correspond au type MIME du 

fichier 

$ _FILES['photo'] ['size'] 

correspond a la taille en octets du 

fichier 

$ _FILES[ 'photo'] 

[ 'tmp_name'] 

correspond au nom temporaire du 

fichier 



Tableau des differentes informations correspondant 
a un fichier telecharge par la methode POST. 
Dans les exemples ci-contre, on suppose que le nom 
du champ du formulaire (de type fichier) est photo. 
Attention I Dans ce cas, le formulaire dans lequel est 
integre le champ de telechargement de fichier (balise 
input de type="f ile") doit etre configure avec 
I'attribut enctype="mul ti part/form-data" et 
en methode POST. 
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Variables de session 

Depuis PHP 4, la gestion des sessions est plus facile. Des qu'une nouvelle session est 
demandee, un identifiant de session est automatiquement cree, auquel on associe les 
differentes variables memorisees durant la session dans un tableau nomme $_SESSI0N. 

Pour pouvoir stacker ou lire des variables dans la session de l'utilisateur, il faut que 
l'instruction d' initialisation de la session session_start( ) soit presente en debut de la page 
(il faut placer imperativement cette fonction avant tout code HTML ou fonction echo( )). 
L'ajout, la modification ou la lecture d'une variable de session peut ensuite etre effectue. 

Tableau 21-4 Fonctions de gestion des sessions 



Fonction Definition 


session_start( ) 


Initialise la session. Si la session n'existe pas encore, un identifiant de session 
est cree puis transmis dans un cookie. Si la session existe deja, la fonction 
actualise toutes les variables memorisees dans la session existante. 
Attention I Vous devez imperativement appeler cette fonction avant toute inter- 
pretation de balise HTML. 


session_destroy( ) 


Detruit toutes les donnees associees a une session. 


session_id( ) 


Renvoie I'identifiant de la session en cours. 


$_SESSION['varl']="Bonjour" 


Memorise la valeur "Bon jour" dans la variable $varl de la session en cours. 



Voici un exemple d'enregistrement et d'utilisation d'une variable de session dans deux 
pages differentes pendant une me me session : 

/* a placer en haut d'une premiere page : enregistrement de la variable "$varl" 

*»dans la session en cours */ 

session_start() ; 

$_SESSION['varl'] = "bonjour"; 

/* a placer en haut d'une autre page : recuperation de la variable "$varl" 

^♦depuis la session en cours */ 

session_start() : 

echo $_SESSION['varl'] ; //affiche la valeur recuperee 

Variables de serveur 

D'autres variables predefinies fournissent des renseignements precieux, comme les noms 
du navigateur client et du systeme d' exploitation ou encore l'adresse IP de l'internaute 
qui consulte votre site. Vous pouvez facilement exploiter ces variables a l'aide du tableau 
$_SERVER['nom_var'], qui regroupe toutes ces variables HTTP. La plupart de ces valeurs 
sont attribuees par le serveur : vous pouvez les exploiter dans de multiples applications, 
mais vous ne devez pas les modifier. Le tableau 21-5 propose une liste non exhaustive de 
ces variables. 



Tableau 21-5 Liste non exhaustive de quelques variables de serveur 
predefinies disponibles sur le serveur Web 



Norn de la variable Definition 


$_SERVER[ ' HTTP_USER_AGENT' ] 


Contient le nom et la version du navigateur utilise par l'internaute. 


$_SERVER[HTTP_ACCEPT_LANGUAGE'] 


Contient le code de la langue parametree dans le navigateur de l'inter- 
naute (par exemple fr, si le navigateur est en version francaise). 


$_SERVER['REMOTE_ADDR'] 


Contient l'adresse IP de l'internaute qui consulte la page. 
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Tableau 21-5 Liste non exhaustive de quelques variables de serveur 
predefines disponibles sur le serveur Web (suite) 



Nom de la variable 

$_SERVER['D0CUMENT_R00T'] 

$_SERVER['QUERY_STRING'] 

$_SERVER['PHP_SELF'] 



Definition 

Contient le nom du repertoire de la page affichee. 

Contient les informations passees dans I'URL apres le caractere ? 

Contient le chemin et le nom de la page Web en cours de traitement. 

Exemple : 

echo $_SERVER['PHP_SELF']; 

//affiche le chemin de la page en cours 

echo $_SERVER['QUERY_STRING']; 

//affiche les informations passees dans I'URL apres le point d'interrogation 

//si I'URL est page.php?varl=20, alors varl=20 est affiche a 1'ecran 



Les constantes 



II est possible de definir des constantes a l'aide de la fonction define( ). Contrairement 
aux variables, les valeurs affectees initialement a une constante ne peuvent plus etre 
modifiees. Les deux principaux avantages des constantes sont les suivants : non seule- 
ment elles rendent le code plus explicite, mais leur valeur peut etre modifiee en un seul 
point alors qu' elles sont accessibles globalement en tout endroit du code (contrairement 
aux variables, qui ont une duree de vie limitee a l'execution du script de la page). II est 
d' usage (mais ce n'est pas obligatoire) de nommer les constantes avec des majuscules. 
Vous pouvez acceder a une constante en indiquant son nom (attention a ne pas mettre de 
$ devant ce nom). 

Tableau 21-6 Definition d'une constante 



Syntaxe 

define (nom_constante, valeur) 

Exemple : definefREPJMAGES", 7monsite/i mages/"); 



A noter 

II existe des constantes predefines par PHP comme _FI LE_, qui contient le nom du fichier en cours d'utili- 
sation, _LINE_, qui contient le numero de ligne actuellement execute ou encore PHP_VERSI0N, qui 
contient la version de PHP installee sur le serveur (_FI LE_ et _LI NE_ sont des exceptions et sont appe- 
lees constantes magiques, car leur valeur n'est pas figee comme dans le cas d'une veritable constante 
mais peut evoluer au cours du programme). 



Voici un exemple d'utilisation de constantes : 

Code 21-13 : declaration et utilisation de constantes 

define("ANNEENAISSANCE",1960); 
defineC'TEXTE" , "Je suis ne "); 
echo TEXTE."en".ANNEENAISSANCE; 
//affiche alors "Je suis ne en 1960"; 
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Expressions et instructions 

Les expressions 

On appelle « expression » tout regroupement d' elements du langage de script qui peut 
produire une valeur (une simple variable $a peut done etre consideree comme une expres- 
sion puisqu'elle produit une valeur lors de son evaluation). Les expressions sont consti- 
tuees de variables, d'operateurs ou de fonctions. On les utilise pour construire des 
instructions ; dans ce cas, elles sont terminees par un point-virgule et elles peuvent etre 
executees. Les expressions servent egalement pour elaborer des conditions de tests, que 
nous allons etudier dans le chapitre dedie aux structures de programme ; dans ce cas, 
elles sont converties en booleen true ou false lors de leur evaluation par l'interpreteur 
PHP. 

Code 21-14 : exemples d'expressions : 

I $i=100 
$resultat=fonction( ) 
if ($a>5) 

Les instructions 

On appelle « instruction » une expression terminee par un point-virgule. Les instructions 
sont traitees ligne par ligne lors de 1' interpretation du code PHP. 

Code 21-15 : exemples d' instructions : 

|$a=100; //cette premiere instruction affecte la valeur 100 a la variable $a 
echo $§: //cette deuxieme instruction affiche la valeur de $a (soit 100) 



Les operateurs 



Les operateurs permettent de lier des variables ou des expressions. II existe differentes 
families d'operateurs selon les fonctions realisees ou les expressions avec lesquelles on 
peut les employer (affectation, arithmetique, comparaison, logique ou de chaine). 

Operateurs d'affectation 

L'operateur d'affectation est le plus courant. On peut aussi l'utiliser sous une forme 
compacte integrant une operation arithmetique puis une affectation. 

Tableau 21-7 Operateurs d'affectation 



Symbole 


Definition 


= 


Affectation de base 


+= 


Addition puis affectation 


-= 


Soustraction puis affectation 


*= 


Multiplication puis affectation 


/= 


Division puis affectation 


%= 


Modulo puis affectation 



L'operateur d'affectation de base permet d'attribuer une valeur issue d'une expression. 
Les autres operateurs d'affectation permettent en outre de realiser des operations arith- 
metiques. 
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Code 21-16 : exemples d' affectations 



$varl=0; //affectation de base (initialisation de $varl a 0) 

echo $varl; 

$varl+=2; //ici $varl vaut 2 (0+2) 

echo $varl; 

$varl+=14; //et maintenant $varl vaut 16 (2+14) 

echo $varl; 



Operateurs arithmetiques 

Lorsqu'on gere des variables de type numerique, on dispose d' operateurs arithmetiques 
qui peuvent realiser toutes les operations mathematiques standards. 



A noter 

Si Ton desire forcer la priorite d'execution d'une 
encadrer I'expression a executer en premier. 


operation, 


il est 


possible 


d'utiliser les 


parentheses 


pour 



Enfin, 1' incrementation et la decrementation (addition ou soustraction d'une unite) sont 
souvent utilisees en programmation et PHP fournit des operateurs specifiques pour ce 
faire (++et --). 

Tableau 21-8 Les operateurs arithmetiques permettent d'appliquer des operations 
mathematiques a des variables de type numerique 



Symbole 


Definition 


+ 


Addition 


- 


Soustraction 


/ 


Division 


* 


Multiplication 


% 


Modulo : I'expression $ a % $b retourne le reste de la division de $ a par $b 


++ 


Increment ($a++ ou ++$a) 


-- 


Decrement ($a-- ou --$a) 



Code 21-17 : exemples d' operateurs arithmetiques : 

$varl=5+2; //addition de deux valeurs numeriques 

echo $varl; 

$var2=2+$varl ; // addition d'une valeur numerique et d'une variable 

echo $var2; 

// 

$var5=14; 

$var4=$var5%5; // 14 modulo 5 est egal a 4 (14/5=2 et reste 4) 

echo $var4 ; 

// 

$var3=($var2+$varl)/2; 

//utilisation des parentheses pour forcer les priorites des operateurs 

echo $var3; 

++$var3; //apres cette incrementation, la variable est egale a "$var3+l" 

echo $var3; 
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Operateurs de comparaison 

Les operateurs de comparaison sont utilises dans les expressions de condition des 
structures de programme (voir le chapitre sur les structures de programme) ou avec 
l'operateur ternaire presente ci-apres. lis permettent de comparer deux expressions. 
L'expression qui resulte de cette comparaison est egale a true (vrai ou 1) lorsque la 
condition a controler est verifiee et a f al se (faux ou 0) dans le cas contraire. 

Tableau 21-9 Operateurs de comparaison 



Symbole 


Definition 


== 


Egal 


< 


Strictement inferieur 


> 


Strictement superieur 


<= 


Inferieur ou egal 


>= 


Superieur ou egal 


i = 


Different 



L'operateur de comparaison permet d'elaborer des expressions de condition que vous 
pouvez utiliser dans les instructions de structure du programme (i f, whi 1 e, f or. . .). 

Code 21-18 : exemple d'utilisation d'expressions de condition : 

|if($varl>2) //teste l'expression de condition 
echo "le test est positif"; 

Operateur ternaire 

L'operateur ternaire permet de tester rapidement une expression de condition et d'effec- 
tuer une action specifique selon le resultat du test. Nous verrons qu'il est possible d'utili- 
ser les structures de choix (avec les instructions if et el se) pour realiser la meme action. 
Dans ce cas, la syntaxe est moins concise. 

Tableau 21 -1 Operateur ternaire 

Syntaxe 

[expression de condition]?[expression effectuee si vrai]:[expression effectuee si faux] 

Exemple: ($varl>2)?($var3="oui") : ($var3="non") 

dans lecasou $varl est superieure a 2, oui estaffectea $var3, sinon c'est non. 



L'operateur de choix ternaire permet de realiser l'equivalent d'une petite structure de 
choix utilisant if et el se. 

Code 21-19 : exemple d'utilisation d'un operateur ternaire : 

|$lg="fr"; 
echo ($lg=="f r")?"bonjour": "hello" ; 
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Operateurs logiques 

Les operateurs logiques permettent de composer des expressions de condition complexes 
a partir de variables booleennes ou d'autres expressions de condition. Vous pouvez utili- 
ser les parentheses pour forcer les priorites entre les operateurs ou pour ameliorer la 
lisibilite du code en encadrant les expressions de condition. 

Tableau 21-11 Operateurs logiques 

Symbole Exemple Fonction Definition 

&& $varl && $var2 ET Renvoie true (vrai) si les deux variables $varl ET $var2 

sonttrue. 
AND $varl AND ET 

$var2 



II 


$varl | | $var2 


OU 
OU 


Renvoie true (vrai) si au moins I'une des deux variables 
$varl OU $var2 est true. 


OR 


$varl OR $var2 


XOR 


$varl XOR 
$var2 


OU exclusif 


Renvoie true (vrai) si I'une des deux variables $varl OU 
$var2 est true, mais pas les deux. 


i 


ISvarl 


Negation 


Renvoie la negation de $varl. 



L'operateur logique permet de relier logiquement deux expressions booleennes. 
Code 21-20 : exemples d' operateurs logiques : 

if($varl>2) AND ($varl<5) 

echo "la variable ".$varl." est plus grande que 2 mais inferieure a 5"; 
// 

if($varl=="jean") OR ($varl=="f red" ) OR ($varl=="marie") 
echo "la variable ".$varl." est jean, fred ou marie"; 

Operateur de concatenation 

L'operateur de concatenation est souvent utilise pour former des expressions a partir 
d' elements de differents types (variable avec du texte par exemple) ou a partir d'autres 
expressions. L'operateur utilise pour relier ces expressions est le point. Comme pour les 
operateurs arithmetiques, il existe une forme compacte d' affectation d'une concatenation. 
Elle est frequemment utilisee pour regrouper differentes expressions dans une meme 
variable (voir exemples ci-dessous). 

Tableau 21 -1 2 Operateur de concatenation 



Syntaxe 


Forme no 


male : 


expressions 


= expression!. exp 


ression2 ; 










Exemple : 
euros" 


$var3= 


=$varl. "euros 


" ; // 


si $varl 


est 


egale a 


50, a 


ors $var3 est ega 


le a 


"50 


Forme compacte 


: expressions 


.= exp 


ression2 ; 














Exemple 






$varl= 
$varl. 


"Monsieur" 
="Dupond" ; 






Apres 
egale 


ces deux instructions, 
a « Monsieur Dupond » 


$varl 


est 
I 
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L'operateur de concatenation permet de regrouper deux expressions et d'affecter ce 
resultat a 1' expression de gauche. 

Code 21-21 : exemples d'operateurs de concatenation : 

$varl="Jean" ; 

$var2="Fred"; 

$var3=$varl." et ".$var2; 

echo $var3; //on affiche "Jean et Fred" a 1'ecran 

// 



$var3="Bonjour" ; 

$var3.=$varl ; 

$var3.=" et "; 

$var3.=$var2; 

echo $var3; //on affiche "Bonjour Jean et Fred" a 



Bibliotheques de fonctions integrees a PHP 

On appelle bibliotheque un ensemble de fonctions qui permettent de realiser des taches 
relatives a un meme domaine. On distingue les bibliotheques de fonctions utilisateurs et 
les bibliotheques natives PHP. Dans le deuxieme cas, les fonctions integrees sont facile- 
ment identifiables par leur nom, qui contient souvent un prefixe commun a chaque biblio- 
theque (exemple : mysql_connect(), strpos( )...). La liste des fonctions integrees est 
longue. Nous en avons selectionne quelques-unes que nous presentons ci-dessous. Nous 
vous invitons a consulter la documentation PHP (www.php.net) si vous desirez exploiter 
une fonction specifique. 



Fonctions PHP generates 

Tableau 21-13 Les principales fonctions PHP generates 



Syntaxe et exemples Description 


empty($var) 


Retourne le booleen false si la variable $var estdefinieoubienprendune 

valeur. 

Retourne true dans le cas contraire. 


define(nom_cst,va leur, option) 


Definit une constante nom_cst qui a pour valeur « valeur ». Par defaut, le 
nom de la constante est sensible a la casse, mais si I'argument option est 
egal a 1 , le nom est insensible a la casse. 


headerCchaine") 


Produit un en-tete HTTP comme Content-type, Location, Expires... 


isset($var) 


Retourne true si la variable $var est definie et prend une valeur. 
Retourne false dans le cas contraire. 


md5("chaine" ) 


Fonction de codage qui retourne une chaine de 32 octets associee a I'argu- 
ment chaine. 


phpinfot ) 


Affiche les informations sur I'interpreteur PHP installe sur le serveur. 


rand( ) 


Retourne une valeur aleatoire. 
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Fonctions PHP dediees aux tableaux 

Les tableaux de variables sont frequemment employes en programmation. PHP propose 
de nombreuses fonctions pour gerer leur contenu (tri, navigation dans le tableau, acces aux 
elements. . .). Le tableau 21-14 recapitule les fonctions les plus couramment employees. 

Tableau 21-14 Principales fonctions PHP dediees aux tableaux 



Syntaxe et exemples Descriptions 


array_wal k($tabl,nom_fonction) 


Execute lafonction nom_fonction surchaque element du tableau $tabl. 


arsort($tabl) 


Trie le tableau $tabl par ordre decroissant. 


asort($tabl) 


Trie le tableau $tabl par ordre croissant. 


count($tabl) 


Retourne le nombre d'elements contenus dans le tableau $tabl. 


current($tabl) 


Retourne I'element courant du tableau $tabl mais n'avance pas le pointeur interne 
du tableau. 


each($tabl) 


Retourne chaque paire cle/valeur du tableau $tabl et avance le pointeur interne du 
tableau. Si le pointeur arrive a la fin du tableau, retourne f al se. 



Fonctions PHP dediees aux dates 

Les fonctions de date et d'heure de PHP se referent au tampon horaire UNIX. Ce tampon 
contient le nombre de secondes qui se sont ecoulees depuis le debut d'UNIX, soit le 
premier Janvier 1970 a h 00 (heure Greenwich GMT). 



Tableau 21-15 Principales fonctions PHP dediees aux dates 



Syntaxe et exemples Description 


checkdate($month,$day,$year) 
checkdate(03,20,2002); 
//retourne true car la date du 
20 mars 2002 existe 


Verifie la validite d'une date et retourne true si elle est valide et false 
dans le cas contraire. 


dateC'format" ,$date) 
$aujourdhui=date("d/m/y"); 
//retourne la date du jour au format 
suivant : 30/01/03 


Formate une date. Retourne une chaine de caracteres au format impose 
par format (il existe de nombreux formats possibles). La date est fournie 
par $date, mais si ce parametre n'est pas mentionne, c'est par defaut la 
date courante qui est retournee. 


mkti me ( $h , $mi n , $sec , $mon , $day , $ 
year[,int is_dst]) 
mktimeUO, 0.0. 1,25. 2003,1); 
//retourne en secondes : 1043481600 


Retourne le tampon UNIX (temps reference en secondes depuis le 1 er Jan- 
vier 1970) correspondant a la date indiquee en parametre. 
A noter : I'argument optionnel is_dst permet de tenir compte de I'heure 
d'hiver (si I'heure d'hiver est appliquee, i s_dst=l et sinon). 


getdate(tamponJJNIX) 

//ce script affiche 1 'heure actuelle 

//par exemple : il est 18 h 45 

$datejour=getdate() ; 

$heure=$datejour[hours] ; 

$min=$date jour [minutes] ; 

echo "il est ".$heure." h ".$min; 


Appelee sans parametre, cette fonction retourne un tableau associatif qui 
contient la date et I'heure actuelle. Si une valeur de tampon UNIX est indi- 
quee, le tableau contient les informations en rapport avec ce tampon. Pour 
recuperer une information de ce tableau, il faut utiliser la cle adaptee, par 
exemple : 

$aujourdhui=getdate( ) ; 

echo $aujourdhui [mday] ; //jour du mois (numerique de 1 
a 31); 

echo $aujourdhui [mon] ; // mois (numerique de 1 a 12); 
echo $aujourdhui [year] ; //annee (numerique, par ex : 
2004); 
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Fonctions PHP dediees aux chaines de caracteres 

Certaines fonctions de gestion des chaines de caracteres sont tres importantes dans les sites 
dynamiques. En effet, lorsqu'on ajoute dans une base de donnees une chaine comportant des 
caracteres speciaux (« ' » par exemple), le serveur MySQL signale une erreur. La solu- 
tion consiste a faire preceder ces caracteres speciaux d'une barre oblique inverse grace a 
lafonction AddSlashesO. La fonction StripSlahesO permet ensuite de les supprimer. 

Tableau 21-16 Principales fonctions PHP dediees aux chafnes de caracteres 



Syntaxe et exemples Description 


trim($chaine) 


Supprime les espaces initiaux et finaux d'une chaine de caracteres 

Schaine. 


str_replace($chl.$ch2,$ch3) 


Substitue une chaine $ch2 a toutes les occurrences d'une chaine de 
recherche $chl dans une chaine specifique $ch3. 


StripSlashes($chaine) 

$chainel="aujourd\'hui"; 

$cha ine2=StripSl ashes ($chainel); 

echo $chaine2; 

//affiche "aujourd'hui " 


Supprime les barres obliques inverses devant les caracteres speciaux de 
la chaine $chaine. 


AddSlashes($chaine) 

$chainel="aujourd'hui"; 

$chaine2=AddSl ashes($chainel); 

echo $chaine2; 

//affiche "aujourdVhui " 


Ajoute une barre oblique inverse devant les caracteres speciaux d'une 
chaine $chaine. 


strtolower($chaine) 


Renvoie la chaine $chaine en minuscules. 


strtoupper($chaine) 


Renvoie la chaine $chaine en majuscules. 


explode($separe,$chaine) 
$chainel="Paris:Rennes:Lille"; 
$tabl= explode(":",$chainel) ; 
//retourne le tableau suivant : 
array("Paris","Rennes","Lille") 


Scinde la chaine $chaine en plusieurs parties selon le separateur 
$separe. Retourne un tableau des valeurs ainsi separees. 


implode($separe,$tab) 

$tab=array("Paris","Rermes","Lil le") ; 

$chainel= implode(":",$tab) ; 

echo $chainel; 

/* affiche la chaine suivante : 

"Paris:Rennes:l_ille" */ 


Retourne une chaine de caracteres constitute de tous les elements du 
tableau Stab separes par $separe. 



Fonctions PHP dediees aux fichiers 

La plupart des operations de base realisables avec des fonctions PHP necessitent le 
passage en argument d'un identifiant de fichier que nous noterons $id dans le tableau 21-17. 
Cet identifiant est obtenu lors de l'ouverture du fichier a l'aide de la fonction fopenO. 
Pour toutes les operations d'ecriture, il faut s'assurer au prealable que les droits du fichier 
sont configures en consequence (vous pouvez rapidement realiser ce parametrage a l'aide 
de la fonction chmod de votre outil de FTP). 
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Tableau 21-17 Principales fonctions PHP dediees aux fichiers 



Syntaxe et exemples Description 


fopent "nom_fichier" , "mode" ) 
$id=fopen( "monf ichier.txt" . "r" ) ; 


Ouverture d'un fichier selon le mode « mode » (voir detail ci-dessous). Retourne 
un identifiant ($ i d par exemple) necessaire dans d'autres fonctions de manipu- 
lation de fichiers. 


Le parametre mode de la fonction fopen( ) definit les modes d'ouverture de fichier suivants : 

- « r » : ouvre un fichier en lecture seule et place le pointeur en debut du fichier. 

- « r+ » : ouvre un fichier en lecture et en ecriture et place le pointeur en debut du fichier. 

- « w » : ouvre un fichier en ecriture seule et place le pointeur en debut du fichier, mais en supprimant le contenu existant. Si le 

fichier n'existe pas, il est cree. 

- « w+ » : ouvre un fichier en lecture et ecriture et place le pointeur en debut du fichier, mais en supprimant le contenu existant. 

Si le fichier n'existe pas, il est cree. 

- « a » : ouvre un fichier en ecriture seule et place le pointeur a la fin du fichier (ajout). Si le fichier n'existe pas, il est cree. 

- « a+ » : ouvre un fichier en lecture et ecriture et place le pointeur a la fin du fichier (ajout). Si le fichier n'existe pas, il est cree. 


copy ($source,$desti nation) 
$fichier="index.php" ; 
copy ( $f i chi er, $f i chi er. ' .bak' ) ; 
//ici, on realise une copie de 
sauvegarde "index. php. bak" 


Copie le fichier $source dans le fichier $desti nation (si $desti nation 
n'existe pas, il est cree). Si I'operation est effectuee, la fonction retourne true 
sinon false. 


fpassthrut "nom_fichier") 


Lit completement le fichier et I'affiche dans le navigateur. Le fichier peut etre un 
fichier texte ou un fichier image (binaire). 


file_exists("nom_fichier" ) 


Retourne la valeur true si le fichier existe. Sinon retourne f al se. 


file("nom_fichier" ) 


Lit un fichier et retourne un tableau contenant une ligne du fichier dans chacun 
de ses elements. 


fgetc($id) 


Lit un caractere du fichier ouvert avec $i d. 


fgets($id, "nombre") 
f read($id, "nombre" ) 


Lit un nombre donne d'octets (nombre) du fichier ouvert avec Sid. 


fputs($id, "chaine" ) 
fwrite($id, "chaine") 


Ecrit une chaine de caracteres (chaine) dans un fichier ouvert avec $id. 


rewind($id) 


Place le pointeur du fichier au debut du fichier ouvert avec $id. 


feof($id) 


Retourne la valeur true si le pointeur de fichier se trouve a la fin du fichier ou 
s'il y a une erreur. Sinon retourne f al se. 


fclose($id) 


Ferme un fichier ouvert par la fonction f open ( ) . 



Code 21-22 : dans l'exemple ci-dessous, la valeur du fichier est lue, incrementee puis 
enregistree dans le meme fichier : 

<?php 

$fichier=fopen( "monfichier.txt" ,"r+" ) ; 

//ouverture du fichier "monfichier.txt" en mode lecture/ecriture 

$sortie=fgets($fichier,10) ; 

$sortie++; //incremente la valeur 

fseek($fichier,0) ; //positionne le pointeur en debut de fichier 

fputs($fichier, Ssortie); 

//ecriture de la nouvelle valeur dans le fichier 

fclose($f ichier) ; // fermeture du fichier 

?> 
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Attention aux droits des repertoires sur votre site distant 

Si vous desirez utiliser des fonctions dediees aux fichiers sur votre site distant, sachez qu'il est alors 
necessaire de configurer les droits du repertoire contenant le fichier concerne. Pour changer les droits 
d'un repertoire, la methode la plus simple est d'utiliser la fonctionnalite CHMOD de votre client FTP (par 
exemple avec le client FTP de Dreamweaver, il suffit de faire un die droit sur le repertoire distant a modifier 
et de choisir I'option « gerer les autorisations »). 



Fonctions PHP dediees a MySQL 

PHP dispose de nombreuses fonctions dediees a la gestion de la base MySQL. Ces fonc- 
tions commencent toujours par mysql_. Nous vous presentons ci-dessous celles qui sont le 
plus couramment utilisees. 



Tableau 21-18 Principales fonctions PHP dediees a MySQL 



Syntaxe et exemples Description 


mysql_connect ( "nom_hote" ."login" ."password") ; 

//ci-dessous la meme fonction avec I'option 

connexion persistante 

mysql_pconnect ( "nom_hote" , "login" , "password") ; 

//exemple : creation d'un identifiant de connexion 

"Sid" 

$id=mysql_connect ( "1 oca host" ."sport" , "ey roll es") : 


Permet d'etablir la connexion avec le serveur de base de 
donnees MySQL. Le nom de I'hote, I'identifiant et le mot 
de passe sont communiques comme arguments de 
cette fonction. lis doivent evidemment etre configures au 
prealable sur le serveur MySQL. Dans le cas d'un heber- 
gement mutualise, ces informations vous sont communi- 
quees par votre hebergeur. 

Cette fonction retourne un identifiant de connexion qu'il 
convient d'enregistrer dans une variable (exemple : 
$id), afin de pouvoir I'utiliser dans les autres fonctions 
MySQL. 


mysql_select_db ("nom_base_donnees" ) ; 

//exemple : selection de la base de donnees 

"sport_db" 

mysql_select_db ("sport_db" ) ; 


Permet de selectionner une base de donnees dont le 
nom est communique en argument de la fonction. 


mysql_query ("requete_SQL" , "id_connexion") ; 
//exemples : 

$result=mysql_query ("SELECT * FROM adherents ", $id); 
Iresul t=mysql_query ($query ,$id) ; 


Permet d'envoyer une requete SQL au serveur. Vous 
pouvez saisir la requete directement dans la fonction ou 
la determiner au prealable dans une variable (exemple : 
Iquery) et la passer en argument dans la fonction. 


mysql_fetch_array ( "resul tat_query" [ ,type_tableau] ) ; 
//argument optionnel : type_tableau : 
//MYSQL_ASSOC : tableau associatif 
//MYSQL_NUM : tableau indice 
//MYSQL_BOTH : tableau mixte (par defaut) 
//exemple : 
$membres=mysql_fetch_array ({result); 


Permet de fournir le resultat de la requete dans un 
tableau associatif, indice ou mixte (selon I'argument 
optionnel type_tableau). La variable contenant le 
resultat de la requete doit etre passee en parametre 
dans le premier argument (exemple : $resul t). 


mysql_free_resul t ( "id_query") ; 
//exemple : 
mysql_free_resul t ($result); 


Permet de vider les resultats obtenus a I'aide de la pre- 
cedente requete avant de sortir de la procedure. 



Code 21-23 : l'exemple ci-dessous est un script complet de connexion et d'affichage des 
noms des joueurs stockes dans une base nommee machineasous : 

I $id=mysql_connect( "local host" ."machine" , "1234") ; 
//Le serveur est "localhost", I'identifiant "machine" et le mot de passe "1234" 
(reportez vous au chapitre 22 pour creer des parametres de connexion MySQL. 
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II 
mysql_select_db("machineasous"); 

//Selection de la base de donnees "machineasous" . 
// 

$query="SELECT * FROM joueurs"; 

//Elaboration de la requete SQL et enregistrement dans la variable "$query". 

// 

$result=mysql_query($query,$id); 

//La requete "$query" est envoyee ail serveur accotnpagnee de son identifiant "$id" 

// 

while ($joueurs=mysql_fetch_array($ result)) 
{ 

echo "Le joueur " .$joueurs[nom] . " est inscrit au club de jeu <br>"; 
} 

//Recuperation des donnees dans le tableau $joueurs[] et affichage ("nom" est un des 
^•champs retournes par le serveur de base de donnees). 

mysql_f ree_resul t($resul t) ; 

//Libere la memoire des resultats obtenus. 



Ne melangez pas les langages ! 

Nous avons vu qu'une page dynamique etait composee de scripts PHP integres dans une structure de 
page HTML. Le langage SQL prend place dans la meme page dynamique. On le retrouve notamment en 
argument de la fonction PHP mysql_query( ), qui permet de transmettre la requete SQL a la base de 
donnees. Ces trois langages sont done integres dans le meme code d'une page dynamique et il est tres 
important de ne pas les melanger : ce sont des langages differents dont il faut veiller a utiliser la syntaxe 
correspondante. 



Fonctions utilisateur 

Dans la partie precedents, nous avons deja presents de nombreuses fonctions integrees 
par defaut dans PHP. Cependant, en pratique il est souvent necessaire de creer des 
fonctions utilisateur adaptees aux besoins du programme. 

Gestion des fonctions utilisateur 

Declaration et utilisation des fonctions 

Une fonction permet d'exploiter une meme partie de code a plusieurs reprises dans un 
programme, ce qui est tres interessant pour les routines standard souvent utilisees en 
programmation (affichage d'une valeur, calculs mafhematiques courants, conver- 
sions...). PHP propose de nombreuses fonctions integrees en standard, que nous etudie- 
rons dans la section suivante (echoO, par exemple). Vous pouvez egalement realiser vos 
propres fonctions en les declarant a l'aide du mot-cle functionO. Dans une fonction, il 
est possible d'exploiter des variables sans risque de conflit avec celles du programme 
principal, car elles n'ont qu'une portee locale. La declaration d'une fonction comporte 
une tete et un corps. Le mot-cle function est place dans la tete de la fonction, suivi du 
nom de celle-ci et, entre parentheses, de la liste des arguments attendus separes par une 
virgule (lorsque la fonction ne comporte pas d' argument, les parentheses sont vides). La 
tete de la fonction est suivie du corps encadre par des accolades (comme pour un bloc). 
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Les fonctions ont generalement une valeur de retour, designee par le mot-cle return, suivi 
du resultat retourne dans le programme. 



Important 

La valeur retournee avec return (exemple : return $res) se substitue a I'appel de la fonction (exem- 
ple : moyenne(4,6)) dans le programme principal. II est alors possible d'affecter ce resultat a une autre 
variable pour I'exploiter ulterieurement. 
Par exemple, si la fonction est appelee de cette maniere : 
$moncalcul=moyenne(4,6) ; 

et si le resultat retourne est $res (return $res), I'appel de la fonction est alors equivalent a I'affectation 
suivante : 

$monCalcul=$res; 



Tableau 21-19 Declaration d'une fonction utilisateur 



Syntaxe de la declaration d'une fonction 

function nom_de_fonction (argl ,arg2...) 
{ 

instruction].; 

instruction2; 



[return $varO;] 



) 
Remarques 



Le nom de la fonction ne doit comporter ni espace ni point. 

Les parentheses permettent de passer des arguments separes par des virgules. 

Les arguments peuvent etre des variables ou des constantes. 

La duree de vie d'une variable de fonction est limitee au temps d'execution de la fonction 

return permet de retourner une variable resultat $varO dans le programme, mais sa pre 

sence n'est pas obligatoire. 

[xxx] : le code xxx est facultatif. 






Tableau 21-20 Utilisation d'une fonction utilisateur 



Syntaxe de I'utlllsatlon d'une fonction 

nom_de_fonction (argl ,arg2...) ; 



Code 21-24 : creation d'une fonction moyenne o pour le calcul de la moyenne de deux 
valeurs : 



//Declaration de la fonction 

function moyenne ($a,$b) //tete de la declaration 
{ //debut du corps 

$res=($a+$b)/2; //instructions de la fonction 
return $res; //information retournee au programme 
} //fin du corps 

//Utilisation de la fonction dans le programme 

$moncal cul=moyenne(4,6) ; //appel de la fonction 

echo "la moyenne de 4 et de 6 est egale a Smoncalcul"; 
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Utilisation avancee des fonctions 

Retour de plusieurs resultats 

Avec le mot-cle return, il est possible de renvoyer une variable resultat dans le 
programme principal. Cependant, dans certaines applications, il est utile de recuperer 
plusieurs valeurs de resultat. Dans ce cas, la solution consiste a utiliser un tableau en 
guise de variable retournee par returnO, comme le montre l'exemple ci-dessous. 

Code 21-25 : retour de variables a l'aide d'un tableau : 

//Declaration de la fonction 

function calcul ($a ,$b,$c) 
{ 

$resl=($a+$b); 

$res2=($a+$c); 

$res=array ($resl,$res2) ; 

//le resultat est un tableau de valeurs 

return $res; 
} 

//Utilisation de la fonction dans le programme -- 
$moncalcul=calcul (4,6,5) ; 
echo Smoncalcul [0] ; 
echo $moncalcul [1] : 

/* appel de la fonction et recuperation du resultat dans le tableau $moncalcul, les deux 
^•resultats du calcul peuvent ainsi etre exploites dans le programme principal. */ 

Arguments facultatifs 

Les arguments d'une fonction peuvent devenir facultatifs s'ils sont parametres avec leur 
valeur par defaut dans la declaration. La valeur par defaut d'un argument doit obligatoi- 
rement etre une constante. De meme, il convient de placer les arguments dotes d'une 
valeur par defaut a la fin de l'enumeration des arguments dans la parenthese. L'exemple 
ci-dessous reprend la meme fonction moyenne( ) que precedemment, mais avec la possibi- 
lity de passer un troisieme argument optionnel : si ce troisieme argument n'est pas passe 
dans l'appel de la fonction, il prend sa valeur par defaut, soit la valeur euros. 

Code 21-26 : exemple avec arguments facultatifs : 



//Declaration de la fonction 

function moyenne($a,$b,$c="euros") 

// $c est initialised avec "euros" par defaut 

{ 

$res=($a+$b)/2; 

$res.=$c; 

//ajoute 1 'unite au resultat exemple : 5 euros 

return $res; 
} 

//Utilisation de la fonction dans le programme -- 
$moncalcul=moyenne(4,6) ; 

/* appel de la fonction avec deux arguments uniquement */ 
echo "la moyenne de 4 et de 6 est egale a Smoncalcul " ; 
/* dans ce cas, la ligne ci-dessus affiche : 
"la moyenne de 4 et de 6 est egale a 5 euros" */ 
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Variables globales 

Par defaut, les variables definies dans une fonction ont une portee limitee a celle-ci 
(variables locales). Ainsi, dans l'exemple precedent, vous pouvez tres bien exploiter la 
variable $res a la fois dans la fonction et dans le programme principal sans risque de 
conflit. De meme, il n'est pas possible de recuperer la valeur qui a ete affectee a cette 
variable dans le programme principal sans la retourner avec le mot-cle return. II existe 
toutefois une solution pour augmenter la portee d'une variable afin qu'elle puisse etre 
exploitee dans la fonction et dans le programme principal (variable globale) : il faut la 
declarer dans la fonction en utilisant le prefixe global, comme le montre l'exemple ci- 
dessous (selon la version de votre environnement PHP, la syntaxe pour la declaration et 
1' utilisation des variables globales peut varier mais le principe reste le meme). 

Code 21-27 : exemple d'utilisation d'une variable globale : 

//Declaration de la fonction 

function moyenne($a,$b) 
{ 

global $res; //la variable $res est maintenant de type global 

$res=($a+$b)/2; 
} 

//Utilisation de la fonction dans le programme -- 
moyenne(4,6) ; 

/* La variable $res peut maintenant etre exploitee dans le programme principal */ 
echo $res; //affiche la valeur 5 

Utilisation de fonctions externes 

Inclusion de fichiers avec require() 

Pour eviter de declarer dans chaque programme vos fonctions utilisateur, vous pouvez les 
regrouper dans un meme fichier, mesfonctions.php par exemple, insere dans le script 
grace a la commande requi re( ). Si le fichier appele ne se trouve pas dans le meme reper- 
toire que le fichier appelant, il faut preciser le chemin pour acceder au fichier bibliothe- 
que (exemple: requireC'bibliotheques/mesfonctions.php")). En outre, la variante 
requi re_once() gere l'inclusion multiple sans generer d'erreur (l'inclusion d'un meme 
fichier avec requi re( ) ne pouvant etre effectue qu'une seule fois). 

Code 21-28 : exemple d'inclusion de fichier avec requi ret ) : 



//contenu du fichier "mesfonctions.php" 

<?php 

function moyenne ($a,$b) 

$res=($a+$b)/2; 

return $res; 
} 
?> 

// 

/* Contenu d'un autre fichier utilisant les fonctions du fichier "mesfonctions.php" */ 

<?php 

requi re( "mesfonctions.php") ; 

Smoncal cul=moyenne(4,6) ; 

// appel de la fonction 

echo "la moyenne de 4 et de 6 est Smoncal cul " ; 

?> 
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Inclusion de fichiers avec include() 

La commande requi re( ) est bien adaptee a l'inclusion d'un fichier regroupant des fonc- 
tions, car il ne doit etre appele qu'une seule fois au debut de la page. Cependant, cette 
commande n'est pas une fonction et reste independante des structures de programme. Si 
vous desirez aj outer un fichier gere par une structure de programme, il faut utiliser la 
fonction incl ude( ). Cette fonction est bien adaptee lorsque vous voulez inclure des blocs 
de code plusieurs fois dans la meme page ou les conditionner par une instruction de choix. 

Code 21-29 : exemple avec incl ude( ) : 

I if ($condition=="oui ") 
include( 'fichier.php' ) ; 

Structures de programme 

Les structures des programmes permettent de creer des scripts qui reagissent differem- 
ment selon des evenements (structures de choix) ou executent d'une maniere repetitive le 
meme bloc d' instructions (structure de boucle). 

Structures de choix 

Structures de choix avec if 

Les structures de choix sont utilisees pour traiter les alternatives logiques au cours de 
l'execution du script, afin d'orienter le deroulement du programme en fonction du resultat 
de 1' alternative. Elles comprennent en general une expression de condition. Les expres- 
sions de condition sont constituees de variables ou de constantes reliees par des operateurs 
logiques. Si l'expression de condition entre parentheses est vraie, l'instruction qui suit est 
executee, sinon il ne se passe rien et le programme continue de se derouler apres le bloc 



du 1 f . 



Tableau 21-21 Instruction conditionnelle if 



Syntaxe 

if (expression_de_condition) 
{ 

instruction!.; 

instruction2; 

} 

Forme simplifies sans accolades (s'il n'y a qu'une seule instruction a traiter) : 
if (expression_de_condition) instruction!.; 

Code 21-30 : exemple de structure if : 

I if ($varl>4) 
echo "la valeur est superieure a 4"; 

Structures de choix avec if et else 

La structure de choix utilisant l'instruction if ne traite que les structures de programme 
pour lesquelles la condition est vraie ; dans le cas contraire, aucune instruction n'est 
executee. Avec l'instruction else, vous pouvez definir les instructions a executer dans le 
cas ou la condition testee serait fausse. Ces instructions sont regroupees dans un autre 
bloc qui suit l'instruction el se. 



Ressources sur les technologies associees 



P ARTIE IV 



Tableau 21-22 Instructions conditionnelles if et else 



Syntaxe 



if (expression_de_condition) 
{ 

instructionl; 

instruction2; 



else 
{ 

instruction3; 

instruction^ 



) 



Code 21-31 : exemple de structure if else : 

if ($varl>4) 
{ 

echo "la valeur est superieure a 4"; 

echo "<br> el 1 e est exactement egale a $varl "; 
} 

else 
{ //debut du bloc else 

echo "la valeur est inferieure ou egale a 4"; 

echo "<br> el 1 e est exactement egale a $varl"; 
} //fin du bloc else 

Structures de choix avec if et elseif 

En pratique, lors d'un choix, plusieurs conditions doivent etre testees. Dans ce cas, il faut 
utiliser l'instruction elseif, qui est en quelque sorte une combinaison du else et du if 
suivant ; elle se place a la suite d'une instruction i f pour introduire le bloc a executer au 
cas ou sa condition serait fausse (comme le else) et introduit une nouvelle condition 
(comme le if). Vous pouvez ainsi creer autant de conditions imbriquees que vous le 
souhaitez selon le nombre d'instructions elseif utilisees. 

Tableau 21-23 Instructions conditionnelles if, elseif et else 



Syntaxe 

if (expression_de_condition) 
{ 

instructionl; 

instruction2; 



1 

elseif ( express i on_de_condi ti on ) 
f 

instruction3; 

instruction4; 



1 

else 
{ 

instruction5; 

instruction6; 

1 
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Code 21-32 : exemple de structure if elseif else : 

if ($varl>4) 
{ 

echo "la valeur est superieure a 4"; 

echo "<br> el 1 e est exactement egale a $varl"; 
} 

elseif ($varl>2) 
{//debut du bloc elseif 

echo "la valeur est superieure a 2 mais inferieure ou egale a 4" 

echo "<br> el 1 e est exactement egale a $varl"; 
}//fin du bloc elseif 
else 
{ 

echo "la valeur est inferieure ou egale a 2"; 

echo "<br> el 1 e est exactement egale a $varl"; 



Structures de choix avec switch ... case 

L'instruction switch permet de tester l'egalite d'une valeur passee en parametre 
(valeur_testee) avec une serie de valeurs possibles (valeurl, valeur2...). Si l'une des 
valeurs correspond a la valeur testee, le bloc d'instructions correspondant est execute. 
L' execution des instructions doit se terminer par une instruction break, arm que le 
programme puisse sortir de la structure de choix. On peut ajouter une branche default a 
la fin d'un bloc, afin de traiter tous les cas non prevus dans la structure. 

Tableau 21-24 Instruction switch ... case 



Syntaxe 

switch (valeur_testee) 
{ 
case valeurl: 

instruction!.; 

break; 
case valeur2: 

instruction?; 

break; 
case valeur3: 

instruction3; 

break; 



default: 

l'nstructionD; 



Code 21-33 : programme permettant d'afficher « bonjour » dans la langue de l'internaute 
realise avec une structure switch case: 

$varl="fr" ; 

//cette variable memorise la langue choisie par l'internaute 

switch($varl) 

{ 

case "fr": 
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echo "Bonjour"; 

break; 
case "en": 

echo "Hello"; 

break; 
case "es": 

echo "Hoi a"; 

break; 
case "de": 

echo "Guten Tag" ; 

break; 
} 



Structures de boucle 

Structures de boucle avec while 

Lorsqu'un ensemble d' instructions doit etre execute plusieurs fois en fonction d'une 
condition, il faut utiliser les structures de boucle. En PHP, il existe plusieurs types de 
boucles. Avec l'instruction while, le bloc d' instructions est execute et repete tant que 
l'expression de condition retourne true. Lorsque la condition est ou devient fausse 
(false), le programme sort de la boucle pour executer les instructions qui se trouvent 
apres la fin du bloc. 

Dans cette structure, il est frequent d'utiliser une variable dediee pour le compteur de 
boucle (exemple : $i). Vous devez initialiser cette variable avant la boucle. Elle est 
ensuite testee dans l'expression de condition, puis incremented (ou decrementee selon les 
cas) dans le corps de boucle. La valeur de l'expression de condition etant evaluee avant 
chaque debut de boucle, les instructions du bloc peuvent ne jamais etre executees si la 
condition est evaluee a f al se des le debut. Pour faire evoluer le compteur de boucle, on 
utilise generalement un operateur d' incrementation ou de decrementation ($i++ ou $i --). 
Choisissez le bon type d'operateur, en fonction de la valeur de 1' initialisation du compteur et 
de l'expression de condition choisie, sinon vous risquez d'obtenir une boucle infinie. 

Tableau 21-25 Instruction de boucle while 



Syntaxe 

while (expression_de_condition) 
{ 

instructionl; 

instruction?; 
} 



Code 21-34 : exemple de boucle whi 1 e : 

$i=5; //initialisation du compteur de boucle a 5 

while($i>0) 

{ 

echo "Encore $i tour(s) a faire <br>"; 

$i--; //decrementation du compteur de boucle 
} 

echo "Voila, c'est enfin termine"; 

/* ci-dessus un exemple qui affiche cinq fois le meme texte (tant que $i est superieur 
**a 0) avant d'afficher le texte final. */ 
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Structures de boucle avec for 



L' instruction for est une seconde solution pour traiter les boucles. Sa syntaxe est cepen- 
dant differente de celle de la structure precedente, car les parentheses de l'instruction 
regroupent trois expressions deja presentes dans la boucle whi 1 e, separees par des points- 
virgules. La premiere expression correspond a l'instruction d'initialisation de la boucle 
whi 1 e, la seconde a son expression de condition et la troisieme a l'instruction decremen- 
tation ou de decrementation situee auparavant dans le corps de la boucle while. Cette 
syntaxe tres compacte est particulierement appreciable quant a la lisibilite du code. 

Tableau 21-26 Instruction de boucle for 

Syntaxe 

for (expressionl ; express ion 2 ;expression3) 
{ 

instruction].; 

instruction2; 

} 

Legende expressi onl : expression evaluee en debut de boucle. Frequemment utilisee pour initialiser le comp- 
teur de boucle a I'aide de I'operateur d'affectation (exemple : « $i = 5 »). 

expressi on2 : expression evaluee au debut de chaque passage de boucle. Si le resultatde revaluation 
est true (vrai), le bloc d'instructions de la boucle est de nouveau execute. Dans le cas contraire, le pro- 
gramme sort de la boucle pour executer les instructions qui suivent le bloc. Cette expression est frequem- 
ment utilisee pour tester le compteur de boucle a I'aide d'un operateur de comparaison (exemple : $ i > 0). 

expressions : expression evaluee a latin de chaque boucle. Frequemment utilisee pour incrementer 
ou decrementer le compteur de boucle a I'aide d'un operateur d'auto-incrementation ou de decremen- 
tation (exemple : $i--). 

A noter : pour chaque zone (delimit.ee par un point-virgule), il est possible d'executer plusieurs expres- 
sions, qui doivent etre separees par de simples virgules. Cela permet notamment de gerer plusieurs 
variables de compteur (exemple : for ( $i =5 , $x=l ;$i >0;$i -- , $x++)). 



Code 21-35 : exemple d'une boucle for : 

for ($i=5;$i>0;$i--) 
{ 

echo "Encore $i tour(s) a faire <br>"; 
} 

echo "Voila, c'est enfin termine"; 

//ci-dessus un exemple qui realise la meme boucle que celle donnee en exemple pour 
*-l 'instruction "while". 

Structures de boucle avec foreach 

La boucle foreach est dediee a la manipulation des tableaux de variables. Elle permet en 
effet de lire rapidement le contenu d'un tableau sans avoir a ecrire beaucoup de code. 
Vous avez le choix entre deux syntaxes selon le type de tableau (indice ou associatif). Le 
principe de cette instruction est semblable a celui d'une boucle pour laquelle un pointeur 
interne au tableau est place sur le premier element du tableau (0 pour les tableaux indices et 
la premiere cle pour les tableaux associatifs). A chaque tour de boucle, la variable $va r (voir 
tableau ci-dessous) contient la valeur de l'element pointe : vous pouvez ainsi l'exploiter 
dans les instructions du corps de la boucle. A la fin de chaque boucle, le pointeur se 
deplace sur l'element suivant dans le tableau et ainsi de suite jusqu'a la fin du tableau. 
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A noter 

Dans la syntaxe du tableau associatif, il est egalement possible d'exploiter la cle de chaque element 
($cl e) dans les instructions du corps de la boucle. 



Tableau 21-27 Instruction de boucle foreach 

Syntaxe pour tableau indice 

foreach($tableau as $var) 
{ 

instruction utilisant $var; 
} 

Syntaxe pour tableau associatif 

foreach($tableau as $cle=>$var) 
f 

instruction utilisant $cle et $var; 
} 



Code 21-36 : exemple d'application de l'instruction foreach : 

$agence=array(" Paris" ," Lille", "Marseille"); 

foreach ($agence as $ville) 

{ 

echo "Vil le: " . $ v i 1 1 e . "<br>" ; 
} 

/* ci-dessus un exemple qui affiche toutes les vil les des agences contenues dans le tableau 
^•indice Sagence. */ 



Instructions de controle 

Instruction de controle avec break 

Dans certaines applications, il peut s'averer necessaire de sortir de la boucle avant que 
l'expression de condition ne l'impose (c'est valable pour toutes les boucles : while, 
do...whi 1 e, for, swi tch...case et foreach). L'instruction break permet de quitter la boucle pour que 
le programme passe a l'execution des instructions qui se trouvent apres celle-ci. Si plusieurs 
boucles sont imbriquees, precisez combien de boucles doivent etre stoppees avec 1' argu- 
ment n de l'instruction : break n. L'execution du programme passe alors directement a la 
boucle de niveau superieur, si elle existe (par defaut, cet argument est egal a 1). 



A noter 

Cette instruction est obligatoire dans les structures switch...case afin d'eviter d'executer les instructions 
qui suivent la branche du case selectionne. 



Tableau 21-28 Instruction de controle de boucle break 



Syntaxe 

break [n] 
Legende : 



n : nombre de boucles imbriquees qui sont interrompues. 
Par defaut, n est egal a 1. 
[xxx] : le code xxx est facultatif. 



PHP 



Chapitre 21 



Code 21-37 : exemple d' application de l'instruction break 

$i=5; //initialisation du compteur de boucle 
while($i>0) 



if ($commande[$i ]="arret") 

break; //arrete la boucle si cette variable est egale a 
echo "Encore ".$i." tour(s) a faire <br>"; 
$i--; //decrementation du compteur de boucle 



'arret" 



echo "Voila, c'est enfin termine"; 

/* Voir ci-dessus pour un exemple qui reprend le script de la premiere boucle 
"while", dans lequel on a ajoute une instruction "break" conditionnee par la 
variable "$commande". Si 1 'expression de condition renvoie "true", le programme 
sort prematurement de la boucle et le message de fin s'affiche. */ 

Instruction de controle avec continue 

L'instruction continue est egalement une instruction de controle de boucle. Contraire- 
ment a Taction break, elle permet de se rendre au passage de boucle suivant. De meme 
que pour break, on peut lui preciser, par le biais d'un argument optionnel, le nombre de 
passages de boucle qu'on desire court-circuiter. 

Tableau 21-29 Instruction de controle de boucle continue 



Syntaxe 

continue [n] 

Legende : n : nombre de passages de boucle ignores. 

[xxx] : le code xxx est facultatif. 

(Attention ! Vous ne devez surtout pas saisir les crochets [ et ] dans le code.) 

Code 21-38 : exemple d' application de l'instruction continue : 

for($i=5; $i>0; ++$i) 
{ 

if (!($i%2)) 
continue; //court-ci rcuite 1'affichage des tours impairs 

echo "Encore $i tour(s) a faire <br>"; 
} 

echo "Voila, c'est enfin termine"; 

/* Voir ci-dessus pour un exemple dans lequel on a ajoute une instruction "continue", 
executee pour tous les tours impairs (grace a 1 'utilisation de l'operateur modulo 
dans l'expression de condition !($i%2)). Au final, 1'affichage du message de boucle 
est realise uniquement sur les tours pairs. */ 



Redirection interpage 

Nous venons d'etudier differentes structures qui permettent de gerer le cheminement du 
programme au sein d'une meme page. Cependant, il faut frequemment rediriger le 
programme automatiquement vers une autre page du site. Cette redirection peut etre le 
resultat d'un test de condition (revoir les instructions de choix if, el se, el seif et switch) 
ou bien se situer a la fin d'un script PHP, par exemple apres un script d'ajout d'un nouvel 
enregistrement (pour rediriger l'internaute vers une page affi chant la liste actualisee de 
tous les enregistrements presents dans la base). 
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La fonction header () permet de rediriger l'internaute vers une page ou une URL sans 
intervention de sa part. L inconvenient de cette fonction est que vous devez toujours 
l'utiliser avant tout envoi vers le navigateur, qu'il s'agisse de codes HTML ou d'afficha- 
ges provoques par des fonctions PHP comme echo( ) ou pri nt( ) voire d'un simple espace 
place avant la balise d'ouverture PHP (<?php). II faut done veiller a ce que cette fonction 
soit appelee au debut du script. 

Tableau 21-30 Fonction de redirection headerO 

Syntaxe 

header("Location:nom_cible") 

Legende : nom_cible : lacible vers laquelle on redirige l'internaute peutetre un chemin relatif comme mon- 

fichier.phpou un chemin absolu comme http://www.agencew.com 

Code 21-39 : exemple de redirection PHP par la fonction headerO conditionnee par 
1' instruction if : 

<?php 

//ce script permet de rediriger l'internaute selon 1'etat de la variable 

//Sprofil vers la page suite. php 

if ($profil=="admin") 

header ("Location: suite. php") ; 
?> 

Gestion XML avec SimpleXML 

Le module SimpleXML est une nouvelle extension disponible depuis PHP 5. Si vous 
desirez manipuler des documents XML avec PHP 4, vous devez utiliser l'analyseur 
syntaxique XML ou des technologies plus avancees comme SAX, DOM, XSLT... A 
noter que 1' extension SimpleXML est installee par defaut sur toutes les distributions 
PHP 5, ce qui vous garantit une portability de vos scripts d'un serveur a l'autre. 

SimpleXML se caracterise par sa simplicite d'utilisation contrairement a l'utilisation de 
1' extension XML beaucoup plus lourde a mettre en place en raison de la configuration de ses 
differents gestionnaires. Cependant, notons que si SimpleXML est tres bien adapte pour 
analyser ou modifier des fichiers XML simples, son utilisation n'est pas recommandee 
pour gerer des fichiers XML complexes (il est preferable dans ce cas d'utiliser les techno- 
logies SAX, DOM ou XSLT). 






Tableau 21-31 Syntaxe des principales fonctions et methodes SimpleXML 

$SimpleXMLElement=simplexml_load_file( nomFi chi er) 

Fonction qui permet d'importer un document XML place dans un fichier externe (nomFi chi er) en le transformant en 
element SimpleXML. Si I'importation echoue, la fonction retourne f al se. 

$SimpleXMLElement=simplexml_load_string(nomChaine) 

Fonction qui permet de lire un document XML memorise dans une variable (nomChaine) en le transformant en ele- 
ment SimpleXML. Si la lecture echoue, la fonction retourne f al se. 

$SimpleXMLElement->asXML( nomFi chi er) 

Cette methode renvoie le contenu XML d'une partie (ou la totalite si vous I'appliquez sur I'element racine) du document 
SimpleXML sous forme d'une chaine de caracteres qui peut etre simplement affichee (s'il n'y a pas d'argument) ou 
enregistree dans un fichier externe (dans ce cas le nom du fichier est celui de I'argument de la methode : nomFi chi er). 
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Tableau 21-31 Syntaxe des principales fonctions et methodes SimpleXML (suite) 

$SimpleXMLElement->children() 

Cette methode permet de recuperer tous les enfants d'un element SimpleXML. La liste retournee par la methode est 
structure* comme un tableau de variables et peut done etre facilement exploitee a I'aide de la fonction foreach( ). 

$SimpleXMLElement->attributes( ) 

Cette methode permet de recuperer tous les attributs d'un element SimpleXML. La liste retournee par la methode 
sera structuree comme un tableau de variables et peut done etre facilement exploitee a I'aide de la fonction 
foreacht ). 

$SimpleXMLElement->xpath(expressionXpath) 
Cette methode permet de recuperer une selection de noeuds d'un element SimpleXML selon une expression Xpath 
(non abordee dans cet ouvrage). La liste retournee par la methode est structuree comme un tableau de variables et 
peut done etre facilement exploitee a I'aide de la fonction foreacht). 

Pour lire un document XML contenu dans une variable interne, il suffit d'utiliser la fonction 
suivante : simplexml_load_string(nomChaine). L'argumentde cette fonction doit correspondre 
au nom de la variable. Si la lecture reussit, la fonction renvoie un objet SimpleXML qui 
peut etre ensuite manipule par les autres fonctions de la classe SimpleXML (voir l'exemple 
du code 21-40 ou encore le code 1 1-5 de 1' atelier 11-2), sinon en cas d'erreur la fonction 
renvoie la valeur f al se. 

Code 21-40 : exemple de lecture d'un element specifique d'un document XML : 

<?php 

$nomPeres='<ages> 
<pere > 
<nom>Dupond</nom> 
<prenom>Jean</prenom> 
<age>45</age> 
</pere> 
<pere > 
<nom>Durand</nom> 
<prenom>Claude</prenom> 
<age>35</age> 
</pere> 
<pere > 
<nom>Duval</nom> 
<prenom>Thierry</prenom> 
<age>32</age> 
</pere> 
</ages>' ; 

$xml = simplexml_load_stringC$nomPeres) ; 
echo $xml ->pere[0]->nom; // Affiche "Dupond" 
?> 
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Le langage SQL (Structured Query Language) est un langage normalise d' interrogation de 
bases de donnees. Puisqu'il est normalise, il est independant du type des bases de donnees : 
les memes commandes peuvent done etre exploiters quelle que soit la base utilisee (Access, 
MySQL...). Les commandes SQL peuvent ainsi gerer tout type d'action sur le serveur de 
bases de donnees MySQL, depuis la simple manipulation des enregistrements jusqu'a la 
creation, la modification ou la suppression d'une base, d'une table ou d'un champ. 



Methodes d'execution d'une commande SQL 

Les commandes SQL peuvent etre transmises au serveur MySQL de deux manieres selon 
Taction qu'on desire realiser (voir tableau 22-1). 

Tableau 22-1 Tableau de choix d'une methode pour intervenir 
sur une base de donnees 



Commandes Actions Methode conseillee 


CREATE 

ALTER 

DROP 


Creation ou modifi- 
cation d'une base 
dedonnees ou 
d'une table 


Gestionnaire phpMy Admin : 

Interface graphique qui permet de generer tout type de commande SQL. 

En pratique, le gestionnaire est utilise pour creer ou modifier la structure de la base 
(CREATE, ALTER, DROP) ou pour tester des requetes (SELECT...) en phase de mise au 
point des scripts PHP (necessite un compte administrateur). 

Client MySQL : 

Meme utilisation que le gestionnaire phpMyAdmin mais en mode lignes de code. Luti- 
lisation du client MySql necessite de connaitre toutes les syntaxes SQL, contrairement 
a I'interface graphique presentee ci-dessus (necessite un compte administrateur). 


SELECT 
INSERT 
UPDATE 
DELETE 
REPLACE 




Manipulations des 
enregistrements 
(donnees) des 
differentes tables 
d'une base de 
donnees 


Script PHP d'interfagage MySql : 

Scripts PHP crees dans un editeur de code dont la fonction est d'assurer I'interfacage 
avec la base de donnees. 

Ces scripts repondent exactement aux besoins de I'application et peuvent generer tout 
type de commande SQL mais, en pratique, ils sont surtout utilises pour gerer les enre- 
gistrements des tables (SELECT, INSERT...). 
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La premiere maniere consiste a utiliser un logiciel comme le gestionnaire phpMy Admin 
ou encore le client mysql (qui permet la saisie de commandes en ligne de code directe- 
ment sur le serveur). Cependant, ces outils necessitent de disposer d'un compte adminis- 
trateur sur le serveur de la base de donnees et demandent un apprentissage prealable. En 
pratique, nous allons les utiliser uniquement dans le cadre de la creation ou de la modifi- 
cation de la structure d'une base de donnees. 

La deuxieme maniere consiste a utiliser des scripts PHP dont la fonction est d' assurer 
l'interfacage avec la base de donnees MySql. Ces derniers envoient des requetes a la base 
selon les demandes qu'ils receptionnent (a l'aide d'un formulaire en ligne, par exemple). 
Les resultats des requetes sont ensuite mis en forme et transmis a une application 
specifique. Cette deuxieme methode permet de creer des interfaces client adaptees 
aux besoins d'une application et utilisables en ligne sans authentification prealable de 
l'utilisateur. 

Dans ce chapitre, nous nous interesserons uniquement a la redaction des requetes 
destinees a la manipulation des donnees (SELECT, INSERT, UPDATE, DELETE et REPLACE). 
Nous n' allons pas creer de requetes pour la creation ou la modification de la structure 
de la base de donnees car il s'agit du role du gestionnaire de base de donnees 
phpMyAdmin. 

Dans le chapitre 13, consacre aux applications Ajax-PHP-MySql, nous avons etudie les 
differentes fonctions PHP qui permettent d'integrer une commande SQL dans un script 
PHP (revoir aussi la partie du chapitre 21 consacree a la bibliotheque MySQL de PHP). 
Dans le present chapitre, nous nous limiterons a l'etude des commandes SQL. 

Le tableau 22-2 presente les differentes commandes SQL destinees a la manipulation de 
donnees, leur fonction et leur syntaxe simplifiee. Nous allons completer plus loin ces 
informations par une syntaxe detaillee des commandes. Chaque commande est accompagnee 
de plusieurs exemples. 

Tableau 22-2 Principales commandes SQL de manipulation d'enregistrements 



Commande SQL 

SELECT 

(commande utilisee 
pour tous les jeux 
d'enregistrements) 



Fonction 

Recherche et extraction de donnees. 
Differentes options peuvent etre exploi- 
ters pour selectionner les enregistre- 
ments, les champs retournes, ou 
I'ordre dans lequel sont retournes les 
enregistrements. 



Syntaxe simplifiee 

SELECT champl, champ2, ... 
FROM tablet. table2. ... 
WHERE critere(s) de selection 
ORDER BY information sur le tri 



INSERT 


Ajout d'enregistrement(s) dans la base 
de donnees 


INSERT INTO table (champl. champ2. ...) 
VALUES (valeurl, valeur2, ...) 


UPDATE 


Modification d'enregistrement(s) 


UPDATE table 

SET champ = valeur 

WHERE critere(s) de selection 


DELETE 


Suppression d'enregistrement(s) 


DELETE FROM table 

WHERE critere(s) de selection 


REPLACE 


Remplacement d'enregistrement(s) 
(equivaut aux commandes DELETE et 
INSERT executees successivement) 


REPLACE FROM table 

WHERE critere(s) de selection 
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Conditions de test des exemples de commande SQL 



Installez la base de donnees machineasous rapidement 

Si vous n'avez pas encore realise les ateliers du chapitre 13, vous ne disposez pas encore de la base de 
donnee machineasous avec laquelle nous avons realise les differents exemples SQL de ce chapitre. Pour 
que vous puissiez I'installer rapidement sur votre serveur de developpement (Wamp), nous avons place 
une exportation de cette base dans le repertoire du chapitre 22 des codes source de cet ouvrage (dispo- 
nibles sur le site http : //www . edi ti ons-ey rol 1 es . com). Pour restaurer cette base, il faut commencer 
par ouvrir le gestionnaire de base de donnees phpMyAdmin depuis le manager de Wamp5 et de creer une 
base portant le nom machi neasous. Une fois la base creee, il vous suffit d'importer le fichier de sauvegarde 
machineasous . sqi en suivant la procedure indiquee a la fin de ce chapitre pour disposer des deux tables 
joueurs et gains avec exactement les memes donnees que dans nos exemples. 



Tous les exemples de ce chapitre ont ete testes sur la base de donnees machineasous et a 
l'aide du gestionnaire phpMyAdmin. Ann que vous compreniez bien les specificites de 
chaque clause, nous vous suggerons de realiser chacun de ces exemples. Pour cela, 
ouvrez le gestionnaire phpMyAdmin et selectionnez dans le menu deroulant du cadre de 
gauche la base machineasous (voir repere 1 de la figure 22-1) que nous avons creee prece- 
demment (revoir si besoin le chapitre 13) puis cliquez sur le nom de la table joueurs 
situee en dessous du menu deroulant (voir repere 2 de la figure 22-1). Cliquez ensuite sur 
l'onglet SQL (voir repere 3 de la figure 22-1), saisissez la requete a tester dans le champ 
Executer une ou des requetes (voir repere 4 de la figure 22-1) et cliquez sur le bouton 
Executer (voir repere 5 de la figure 22-1). Vous pouvez ainsi vous aider de la liste des 
champs du tableau de droite en les inserant directement dans votre requete par un simple 
double clic (cette liste n'apparait cependant que si vous avez selectionne au prealable une 
des tables de la base). 
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Figure 22-1 

Procedure de test d' une requete SQL dans phpMyAdmin 
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A noter 

phpMyAdmin ajoute automatiquement a la requete saisie une clause LIMIT (exemple LIMIT 0,30) pour 
limiter le nombre d'enregistrements affiches. Ne soyez done pas surpris de voir apparaitre cette clause 
dans les differentes illustrations presentees dans ce chapitre. 



D' autre part, afin de partir d'une base de test commune et de pouvoir interpreter correc- 
tement les resultats des exemples que nous vous presentons dans ce chapitre, nous vous 
indiquons dans les figures 22-2 et 22-3 l'etat des enregistrements des differentes tables 
de la base machi neasous qui ont servi a nos essais. 
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Figure 22-3 
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Commande SELECT 



La commande SELECT permet de rechercher puis d'extraire les champs demandes d'une 
ou plusieurs tables selon un ou plusieurs criteres. Les resultats ainsi retournes forment 
des « jeux d'enregistrements ». Ceux-ci peuvent etre tries ou groupes selon les options 
retenues dans la requete SELECT. 

SELECT est une commande frequemment utilisee pour des manipulations d'enregistre- 
ments courants ; il est done tres important de bien maitriser toutes ses variantes si vous 
desirez concevoir des requetes SQL avancees. 

Differentes clauses peuvent completer la commande SELECT afin de preciser 1' operation a 
realiser. Par exemple, la clause WHERE permet de selectionner les enregistrements a 
extraire. La clause ORDER BY permet quant a elle de trier les resultats apres leur selection. 
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Nous vous proposons de detailler ces differentes clauses et de les illustrer par des 
exemples. 

Tableau 22-3 Syntaxe de la commande SELET et exemples d'utilisation 





Selection d'enregistrements 


Syntaxe 
detaillee 


SELECT [DISTINCT | DISTINCTROW] 
[table. Ichatnp, ... | * 
[FROM table, ...] 

[WHERE expression_de_selection] 
[GROUP BY [table. ]champ, ...] 
[HAVING expression_de_selection] 
[ORDER BY champ [ASC | DESC] ] 
[LIMIT [debut,] nbjignes ] 


Legende 


[xxx] : le code xxx est facultatif. 

xxx | yyy : le code « | » separe des groupes de code alternatifs (il faut done choisir de saisirsoit 

xxx, soit yyy). 

xxx ... : la suite du code peut etre completee par des groupes de code de meme structure que xxx. 


Exemples 


Exemple 1 : 

SELECT * FROM joueurs; 

Exemple 2 : 

SELECT nom FROM joueurs WHERE nom= 'Def ranee ' ; 

Exemple 3 : 

SELECT joueurs. nom, gains. montant 

FROM joueurs, gains 

WHERE gains. joueurs I D= joueurs. ID; 



Commande SELECT simple 

Dans sa forme la plus simple, la commande SELECT peut etre employee sans la clause 
WHERE. Dans ce cas, en l'absence d'expression de selection, tous les enregistrements de la 
table sont retournes. Pour inclure uniquement certaines colonnes dans le resultat, il faut les 
enumerer apres la commande SELECT. S'il y a plus d'une colonne a retourner, il faut sepa- 
rer les differents noms des colonnes par une virgule. Enfin, si des champs de meme nom 
issus de tables differentes peuvent etre ambigus, il est indispensable de les faire preceder 
du nom de la table a laquelle ils appartiennent afin de lever l'ambiguite. Enfin, il est 
possible de remplacer 1' enumeration des colonnes desirees par le caractere * : toutes les 
colonnes de la table sont alors retournees dans le resultat de la requete. 

Voici deux exemples : 

• pour obtenir tous les champs de tous les joueurs : 

SELECT * FROM joueurs; 

• pour obtenir uniquement les noms et prenoms de tous les joueurs : 

SELECT nom, prenom FROM joueurs; 



Commande SELECT avec des alias 

II est souvent pratique de definir des noms alias differents des noms des champs de la 
base. On peut s'en servir pour definir des expressions de selection ou encore lorsqu'on 
utilise des fonctions, comme nous allons le voir. Pour definir un nom de champ alias, il 
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suffit de faire suivre 1' expression qu'il represente par 1' instruction AS et par le nom de 
1' alias desire. 

Par exemple, voici la commande a saisir pour obtenir tous les identifiants des joueurs 
sous P alias idl, ainsi que leur nom : 

SELECT joueurs. ID AS idl. nom FROM joueurs; 



Commande SELECT avec des fonctions MySQL 

De nombreuses fonctions MySQL peuvent etre utilisees dans les requetes. Elles se subs- 
tituent au nom d'un champ juste apres la commande SELECT. Ces fonctions permettent, 
entre autres, de realiser des calculs mathematiques ou des concatenations. Elles servent 
aussi a preparer une date (enregistree dans la base au format MySQL : AAAA-MM-JJ) afin 
qu'elle soit retournee et affichee au format francais (JJ-MM-AAAA). Le tableau 22-4 propose 
une liste non exhaustive des fonctions MySQL disponibles. 

Tableau 22-4 Liste non exhaustive des principales fonctions MySQL 



Fonction Description 


ABS(nbrl) 


Renvoie la valeur absolue du nombre nbrl. 


ASCIKcarl) 


Renvoie le code ASCII du caractere carl. 


CONCATCeleml. [elemZ. ...]) 


Renvoie la concatenation de tous les elements, un element pouvant etre un 
champ, un nombre ou un caractere. Si c'est un caractere, il convient de I'encadrer 
avec des guillemets simples. 


COUNT(chl) 


Renvoie le nombre d'enregistrements non nuls du champ chl. 

A noter : si on utilise COUNTf*), on obtient le nombre total d'enregistrements de 

la table, quel que soit le champ. 


CURDATEO 


Renvoie la date courante au format AAAA-MM-JJ. 


CURTIMEO 


Renvoie I'heure courante au format HH : MM : SS. 


HEX(nbrl) 


Renvoie la valeur hexadecimale du nombre nbrl. 


IFNULL(eleml.elemZ) 


Renvoie eleml s'il est NULL ; sinon renvoie el em2. 


LAST_INSERT_ID() 


Renvoie la derniere valeur creee pour un champ auto-incremente. 


MAX(chl) 


Renvoie la plus grande des valeurs du champ chl. 


MIN(chl) 


Renvoie la plus petite des valeurs du champ chl. 


NOWO 


Renvoie la date et I'heure courantes. 


SIGN(eleml) 


Renvoie le signe de el eml. 


SUM(chl) 


Renvoie la somme des valeurs du champ chl. 



Lorsqu'on utilise des fonctions MySQL, il est tres pratique de definir un nom de champ 
alias pour exploiter le resultat de la fonction a partir du jeu d'enregistrements. 

Dans l'exemple qui suit, on desire obtenir les montants des gains suivis de « euros ». 
Pour manipuler plus facilement les donnees ainsi creees, on definit un alias nomme 
montantEuro pour representer ce nouveau champ dans le jeu d'enregistrements : 

SELECT CONCATCmontant , ' euros') AS montantEuro FROM gains; 
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Commande SELECT avec la clause DISTINCT 



Si, dans les resultats selectionnes, deux enregistrements sont identiques, la clause 
DISTINCT permet de ne retourner dans le jeu d' enregistrements qu'un seul des enregis- 
trements. 

Dans les exemples ci-dessous, nous posons l'hypothese que deux enregistrements identi- 
ques (Defrance Jean-Marie) ont ete crees dans la table joueurs (pour faire un test, il 
suffit, par exemple, de modifier au prealable le prenom du joueur Defrance Claire ). 

Si on n'utilise pas la clause DISTINCT, voici ce qu'on obtient : 

SELECT nom, prenom FROM joueurs; 

Tableau 22-5 Jeu d'enregistrements obtenu sans la clause DISTINCT 



nom 


prenom 


Defrance 


Jean-Marie 


Defrance 


Jean-Marie 


Defrance 


Melanie 


Dupond 


Alain 


\_2 


|_- 



Avec la clause DISTINCT, le resultat devient le suivant : 

SELECT DISTINCT nom, prenom FROM joueurs; 

Tableau 22-6 Jeu d'enregistrements obtenu avec la clause DISTINCT 



nom 


prenom 




Defrance 


Jean-Marie 




Defrance 


Melanie 




Dupond 


Alain 







Commande SELECT avec la clause WHERE 

La clause WHERE permet d'introduire l'expression de selection a laquelle doit repondre le 
resultat retourne. Plusieurs types d'operateurs peuvent etre utilises pour definir l'expression 
de selection. 

Expressions de selection avec des operateurs de comparaison 

On utilise des operateurs de comparaison pour definir la condition mathematique a 
verifier pour que l'enregistrement soit selectionne. Vous pouvez comparer deux 
champs de la base (cas des jointures), un champ et un nombre ou un champ et une 
chaine de caracteres (dans ce cas, la chaine de caracteres doit etre encadree par des 
guillemets simples « ' ») 

Dans l'exemple qui suit, nous desirons obtenir une selection des montants des gains 
superieurs a 50 euros. Les colonnes renvoyees dans le jeu d'enregistrements sont les ID 
des joueurs et le montant de leur gain : 
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Tableau 22-7 Liste des operateurs de comparaison qui peuvent etre utilises 

dans une requete SQL 



Operateur 


Fonction 


= 


Egal 


> 


Superieur 


>= 


Superieur ou egal 


< 


Inferieur 


<= 


Inferieur ou egal 


<> 


Different 



SELECT joueursID, montant FROM gains WHERE montant>50; 

Dans ce deuxieme exemple, nous desirons obtenir toutes les colonnes de l'enregistre- 
ment correspondant au joueur dont l'identifiant est egal a 2 (attention, si la valeur utilisee 
pour la selection est de type texte, il faut alors l'encadrer par des guillemets (')) : 

SELECT * FROM joueurs WHERE ID=2; 

Dans ce troisieme exemple, nous desirons obtenir le nom et prenom du joueur dont 
l'identifiant est egal a 2 (dans notre exemple, il s'agit du joueur Dupond Al ain), ainsi que 
ses differents gains. Comme les informations sont placees dans deux tables differentes, il 
faut faire une jointure entre les deux tables (voir la section consacree a la commande 
SELECT avec jointure dans ce meme chapitre) pour recuperer les informations correspon- 
dantes (gains. joueursID=joueurs. ID). Si des champs de tables differentes sont utilises 
dans la requete, les noms des tables concernees doivent etre ajoutes apres 1' instruction 
FROM : 



I 



SELECT joueurs. nom, joueurs. prenom, gains. montant FROM joueurs, gains 
WHERE gains. joueursID=joueurs. ID AND joueurs. I D=2 ; 



Expressions de selection avec des operateurs logiques 

Lorsque les criteres de selection sont multiples, 1' expression de selection finale doit etre 
composee des differentes expressions de selection, reliees entre elles par des operateurs 
logiques. Plusieurs operateurs logiques peuvent etre utilises selon le lien desire entre les 
expressions. Vous pouvez trouver ci-apres la liste des operateurs logiques utilisables dans 
une requete MySQL. 

Tableau 22-8 Liste des operateurs logiques qui peuvent etre utilises 
dans une requete SQL 

Operateur Fonction 

AND Les expressions reliees entre elles par AND doivent toutes etre verifiees (VRAIES ou TRUE). 

OR Au moins I'unedes expressions reliees entre elles par OR doit etre verifiee (VRAIE ou TRUE). 

NOT Lexpression precedee par NOT ne doit pas etre verifiee. 

Si vous utilisez plusieurs operateurs logiques, il faut utiliser des parentheses pour definir la structure de I'expression. 

Dans l'exemple suivant, nous desirons obtenir les noms et prenoms des joueurs de la 
famille Defrance ayant gagne plus de 50 euros en un seul jeu. Comme il s'agit ici 
encore d'une requete multi-tables, nous avons ajoute dans la clause WHERE une troisieme 
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condition pour effectuer la jointure entre les deux tables concernees (gains. joueur- 
sID=joueurs. ID) : 

I SELECT DISTINCT joueurs.nom, joueurs.prenom FROM joueurs, gains WHERE joueurs 
*».nom='Defrance' AND gains. montant>20 AND gains . joueursID=joueurs . ID; 

Expressions de selection avec des operateurs de recherche 

On utilise des operateurs de recherche pour definir une condition specifique (qui n'est ni 
logique ni comparative) a verifier pour que l'enregistrement soit selectionne. II existe 
plusieurs types d'operateurs de recherche selon la condition desiree. Le tableau 22-9 liste 
les operateurs de recherche les plus frequents. 

Tableau 22-9 Liste des operateurs de recherche qui peuvent etre utilises 

dans une requete SQL 



Operateur Fonction 


LIKE 


Permet de selectionner un champ dont la valeur commence par, finit par, ou contient une 
chaine de caracteres (%et_ accompagnent souvent L I KE pour definir les caracteres de subs- 
titution dans la chaine). 


BETWEEN 


Permet de selectionner un champ dont la valeur est comprise dans une plage de valeurs. 


IN 


Permet de selectionner un champ dont la valeur appartient a une liste de valeurs. 


IS NULL 


Permet de selectionner un champ dont la valeur est NULL. 


IS NOT NULL 


Permet de selectionner un champ dont la valeur n'est pas NULL. 



Dans l'exemple suivant, nous desirons obtenir la liste des gains dont le montant est compris 
entre 20 et 50 euros : 

SELECT montant FROM gains WHERE montant BETWEEN 20 AND 50; 

Tableau 22-10 Caracteres de substitution qui peuvent etre utilises 
dans une requete SQL 

Caractere Utilisation 

(caractere de Remplace un caractere quelconque. 

soul ignement) 

% Remplace aucun ou plusieurs caractere(s) quelconque(s). 
I I I 

Dans ce deuxieme exemple, nous desirons obtenir tous les enregistrements des joueurs 
dont le prenom contient un « n » : 

SELECT * FROM joueurs WHERE prenom LIKE '%n%' ; 

Commande SELECT avec la clause ORDER BY 

Dans les differents exemples que nous vous avons proposes jusqu' a present, les enregis- 
trements etaient retournes dans l'ordre de la saisie initiale (en general, l'ordre de la cle 
primaire I D auto-incrementee). Si vous souhaitez presenter les enregistrements dans un 
ordre different, utilisez la clause ORDER BY en precisant le ou les champs suivant 
le(s)quel(s) le tri s'effectue. Avec ASC, vous triez par ordre croissant, avec DESC, par ordre 
decroissant. Par defaut, l'ordre est croissant. 
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Dans l'exemple suivant, nous desirons trier par ordre alphabetique tous les prenoms des 
joueurs de la famille Defrance : 

SELECT prenom FROM joueurs WHERE nom='Def ranee' ORDER BY prenom; 

Dans ce deuxieme exemple, nous desirons trier tous les joueurs selon 1' ordre alphabetique 
de leur nom, puis de leur prenom. 

SELECT nom, prenom FROM joueurs ORDER BY nom, prenom; 

Commande SELECT avec la clause LIMIT 

La clause LIMIT indique le nombre maximal d'enregistrements pour le resultat retourne. 
Elle est toujours placee a la fin de la requete. Si vous faites suivre cette clause d'un seul 
chiffre, la limite s' applique a partir de la premiere ligne ; si vous indiquez deux chiffres 
separes par une virgule, le premier indique le numero de ligne a partir de laquelle la 
limite precisee par le deuxieme chiffre s' applique. 



A noter 

Cette clause est specifique a MySQL et ne fait pas partie du standard SQL. 



Dans l'exemple ci-dessous, nous desirons obtenir une selection des joueurs identique a 
celle de l'exercice precedent, mais limitee aux deux premiers enregistrements : 

SELECT nom, prenom FROM joueurs ORDER BY nom, prenom LIMIT 2; 

Dans ce deuxieme exemple, nous desirons obtenir une selection des joueurs identique a 
celle de l'exercice precedent, mais limitee aux deux enregistrements situes apres la troi- 
sieme ligne des resultats de la selection initiale : 

SELECT nom, prenom FROM joueurs ORDER BY nom, prenom LIMIT 3,2; 

Commande SELECT avec jointure 

La jointure permet de creer des requetes portant sur des donnees reparties dans plusieurs 
tables. Pour realiser une jointure, on utilise la meme syntaxe que pour une requete tradi- 
tionnelle, mais en indiquant dans la clause FROM la liste des tables concernees, separees 
par des virgules et en ajoutant dans la clause WHERE l'expression de selection qui permet le 
rapprochement entre les tables. En general, l'expression de selection qui permet le rappro- 
chement entre tables s'exprime par une egalite entre la cle primaire d'une table et la cle 
etrangere de l'autre (par exemple : entre ID de la table joueurs et joueursID de la table 
gains). II faut mentionner le nom de la table en prefixe des noms de champs pour eviter 
toute ambiguite, notamment entre deux champs portant le meme nom mais integres dans 
des tables differentes. Ann d'eviter de rappeler dans son integralite le nom de chaque 
table en prefixe des noms de champs, il est interessant de creer un alias (exemple : dans 
la clause FROM, si on declare joueurs AS j, on peut utiliser l'appellation j.nom dans la 
clause WHERE). 

Dans l'exemple ci-dessous, nous desirons obtenir les differents gains classes du plus 
important au plus faible (issus de la table gains), avec les noms et prenoms des joueurs 
correspondants (issus de la table joueurs) : 



ISEI 



SELECT gains. montant, joueurs. nom, joueurs. prenom FROM joueurs, gains WHERE gains 
. joueursID=joueurs. ID ORDER BY gains. montant DESC; 
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Commande INSERT 

La commande INSERT permet d'inserer de nouveaux enregistrements dans la base et peut 
etre utilisee de differentes manieres. Pour ajouter des valeurs dans une table a partir de 
variables ou de constantes recuperees par un script, par exemple, il existe deux methodes 
differentes : INTO VALUES et INTO SET. Nous verrons aussi comment utiliser la commande 
INSERT pour inserer des enregistrements a partir d'une requete (INTO SELECT). Cette 
derniere methode est tres interessante pour realiser une copie d' enregistrements d'une 
table vers une autre. 

Lors de l'insertion directe a partir de valeurs, les textes doivent etre encadres entre 
guillemets simples alors que les nombres peuvent s'en passer (exemple : ' Chapel ier' 
OU 1980). 



A noter 

Dans les scripts PHP, il est egalement possible d'indiquer des expressions dans une requete (des variables, 
par exemple : " $var '). Dans ce cas, elles sont evaluees avant d'etre inserees dans la base. 



Tableau 22-1 1 Syntaxe de la commande INSERT et exemples d'utilisation 



Fonction Insertion d'enregistrements 


Syntaxe de la 
commande d'insertion 
a partir de valeurs 
(premiere methode) 


INSERT INTO 
table 

[ (champl, champ2 champN) ] 

VALUES 

(valeurl, valeur2 valeurN); 


Syntaxe de la 
commande d'insertion 
a partir de valeurs 
(deuxieme methode) 


INSERT INTO 

table 

SET 

champl=valeurl, champ2=valeur2 champN=val eurN; 


Syntaxe de la 
commande d'insertion 
a partir d'une autre table. 


INSERT INTO 
table_cible 
SELECT 

* | valeurl, valeur2 valeurN 

FROM table_source 

[WHERE expression_de_selection] 


Legende 


tabl e : table dans laquelle sont inserees les donnees. 

champN : nom du champ de la table dans lequel est inseree valeurN. 

valeurN : la valeur doit respecter le format standard de son type (exemple : 'bonjour' 
ou 4562 ou '2003-03-24'). A noter : si la requete est integree dans un script PHP, la 
valeur peut etre remplacee par une variable qui est evaluee au moment de l'insertion 
(exemple : '$var'). 

xxx | yyy : le code | separe des groupes alternatifs, il faut done choisir de saisir soit 
xxx, soit yyy. 

tabl e_source :dans le cas du transfert d'une table source vers une table cible, le sym- 
bole * peut etre utilise, mais il faut veiller a ce que le nombre de champs des deux tables 
soit identique. 
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Commande INSERT a partir de valeurs : methode 1 

Dans sa premiere syntaxe, la commande INSERT permet d'enumerer partiellement les 
champs a inserer dans la base. Cela peut etre interessant dans le cas d'un premier enregis- 
trement partiel, mais il faut alors s' assurer que les champs omis sont parametres pour etre 
facultatifs (attribut null=null) ou auto-incrementes. Dans le cas ou l'enumeration des 
champs n'est pas indiquee, il faut s'assurer que l'ordre des valeurs respecte celui des 
champs de la table. Sachez cependant que, meme si l'enumeration est facultative, il est 
fortement conseille de toujours specifier la liste des champs dans lesquels les valeurs 
doivent s' inserer. En effet, si la structure de la table change, votre requete risque de ne 
plus fonctionner. 

Dans l'exemple ci-dessous, nous desirons ajouter un joueur supplemental a la table 
joueurs. Pour cela, nous allons utiliser la syntaxe complete de la commande INSERT. Dans 
ce cas, mentionnez uniquement les champs qui recoivent une valeur (nom, prenom). La cle 
ID n'etant mentionnee ni dans les champs ni dans les valeurs, MySQL lui attribue une 
valeur par incrementation du dernier I D saisi. 

INSERT INTO joueurs (nom, prenom) VALUES ( 'Audoux' , 'Thierry' ) ; 

Commande INSERT a partir de valeurs : methode 2 

Dans la deuxieme syntaxe de INSERT, les couples champ/valeur doivent etre specifies et 
separes par un signe egal (champl='valeurr). La clause utilisee n'est plus VALUES mais 
SET. 

Dans l'exemple qui suit, nous allons ajouter un nouveau joueur, comme dans l'exemple 
precedent : 

INSERT INTO joueurs SET nom='Audoux' , prenom=' Thierry' ; 

Commande INSERT a partir d'une requete 

Avec ce type de syntaxe, il est possible d'inserer le resultat d'une requete dans une table. 
Dans ce cas, la clause VALUES est remplacee par la requete a inserer. Cette syntaxe est 
particulierement interessante pour copier des donnees d'une table a 1' autre ou encore 
pour realiser la projection d'une table : on preleve certains de ses champs pour creer une 
autre table de plus petite taille. 

Dans ce premier exemple, on desire transferer le contenu de la table joueurs dans une 
table de sauvegarde joueursbackup. II faut evidemment que le nombre et les types des 
champs soient rigoureusement identiques dans les deux tables (pour creer une structure 
identique, utilisez le formulaire de copie d'une table disponible dans l'onglet Operations 
de phpMy Admin, voir figure 22-4) : 

| INSERT INTO joueursbackup SELECT * FROM joueurs; 

Dans ce deuxieme exemple, on desire faire une projection de la table joueurs dans une 
autre table tabl edesnoms. Cette table contient uniquement les noms des differents joueurs 
dans un champ nom avec une cle primaire auto-incrementee ID et doit etre creee au 
prealable : 

| INSERT INTO tabledesnoms (nom) SELECT nom FROM joueurs; 
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Figure 22-4 

Avant de realiser la sauvegarde d'une table a Vaide de la commande INSERT, ilfaut creer une structure de table 
identique a celle de la table a transferer. Pour cela, cliquez sur le nom de la table joueurs dans lapartie gauche de 
phpMyAdmin, puis sur I'onglet Operations en haut de Vecran. Dans le champ « Copier la table vers », saisissez 
le nom de la nouvelle table, cochez V option « Structure seule » et cliquez sur le bouton Executer. 

Commande DELETE 

La commande DELETE permet de supprimer un enregistrement d'une table. Cette opera- 
tion est irreversible et il vaut mieux prevoir l'affichage d'un message d'avertissement 
avant validation definitive de la requete. La commande DELETE doit etre accompagnee de 
la clause WHERE (sinon vous supprimez tous les enregistrements de la table), suivie d'une 
expression de selection d' enregistrements a supprimer. Cette meme expression peut 
d'ailleurs etre utilisee au prealable dans une requete SELECT pour selectionner et afficher 
les enregistrements a supprimer avec la requete DELETE lors de l'etape suivante : 

I SELECT * FROM joueurs WHERE ID=2; 
DELETE FROM joueurs WHERE ID=2; 

Tableau 22-12 Syntaxe de la commande DELETE et exemple d'utilisation 



Fonction 


Suppression d'enregistrements 


Syntaxe de la 
commande de 
suppression 


DELETE FROM 

table 

[WHERE expression_de_selection] 

[LIMIT [debut,] nbjignes ] 


Legende 


tabl e : table ou se trouvent les enregistrements selectionnes. 

[xxx] : le code xxx est facultatif. 

Attention I Les crochets [ et ] ne doivent surtout pas etre saisis dans le code. 



Dans 1' exemple ci-dessous, on desire supprimer tous les enregistrements correspondant 
aux gains inferieurs a 10 euros : 

DELETE FROM gains WHERE montant<10; 



Commande UPDATE 

La commande UPDATE permet de modifier la valeur de certains champs si l'expression de 
selection est validee. L affectation des valeurs est introduite par la clause SET, comme 
pour la commande INSERT. 
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Tableau 22-13 Syntaxe de la commande UPDATE et exemple d'utilisation 



Fonction 

Syntaxe de la 
commande de 
modification 



Legende 



Mise a jour d'enregistrements 

UPDATE 

table 

SET 

chapl=valeurl , champ2=valeur2, .. 

[WHERE expression_de_selection] 

[LIMIT [debut.] nbjignes ] 



champN=valeurN 



table : table ou se trouvent les enregistrements selectionnes. 

[xxx] : le code xxx est facultatif. 

Attention ! Les crochets [ et ] ne doivent surtout pas etre saisis dans le code. 



Dans l'exemple ci-dessous, nous desirons le prenom du joueur dont l'identifiant est 2 

| UPDATE joueurs SET prenom='Stephane' WHERE ID=2; 



Commande REPLACE 

La commande REPLACE permet de remplacer un enregistrement existant et done de modi- 
fier les valeurs de ses differents champs. Cette commande est differente de la commande 
UPDATE car elle supprime d'abord 1' enregistrement selectionne pour ensuite le reinsurer 
avec de nouvelles valeurs. C'est en quelque sorte une combinaison des commandes 
DELETE et INSERT. Comme INSERT, cette commande peut etre realisee selon trois variantes. 
Les deux premieres variantes permettent de remplacer les champs d'un enregistrement 
selon les informations transmises par des valeurs, alors que la troisieme permet d'exploi- 
ter une requete SQL pour fournir les nouvelles donnees. La clause WHERE selectionne le 
jeu d'enregistrements a utiliser pour cette commande. 

Tableau 22-14 Syntaxe de la commande UPDATE et exemples d'utilisation 



Fonction Remplacement d'enregistrements 


Syntaxe de la com- 
mande de remplace- 
ment a partir de valeurs 
(premiere methode) 


REPLACE INTO 
table 

[ (champl, champ2 champN) ] 

VALUES 

(valeurl, valeur2 valeurN) 


Syntaxe de la com- 
mande de remplace- 
ment a partir de valeurs 
(deuxieme methode) 


REPLACE INTO 

table 

SET 

chapl=valeurl , champ2=valeur2, .... champN=val eurN 


Syntaxe de la com- 
mande de remplace- 
ment a partir d'une 
requete 


REPLACE INTO 
tabl e_cible 
SELECT 

* | valeurl, valeur2 valeurN 

FROM table_source 

[WHERE expression_de_selection] 
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Tableau 22-14 Syntaxe de la commande UPDATE et exemples d'utilisation (suite) 



Fonction 

Legende 



Remplacement d'enregistrements 

tabl e : table dans laquelle les donnees sont modifiees. 

champN : nom du champ de la table dans lequel est inseree la val eurN. 

valeurN : la valeur doit respecter le format standard de son type (exemple : 'bonjour' 
ou 4562 ou '2003-03-24'). A noter : si la requete est integree dans un script PHP, la 
valeur peut etre remplacee par une variable qui sera est evaluee au moment de I'insertion 
(exemple : '$var'). 

xxx | yyy : le caractere | separe des groupes alternatifs (il faut done choisir de saisir 
soit xxx, soit yyy). 

tabl e_source : lorsqu'un jeu d'enregistrements issu d'une table source est utilise pour 
mettre a jour les champs d'une table cible, le symbole * peut etre employe, mais il faut 
veiller a ce que le nombre de champs soit identique dans les deux tables. 



Dans l'exemple ci-dessous, nous desirons remplacer le joueur dont l'identifiant est 5 par 
Thierry Audoux : 

REPLACE INTO joueurs VALUESC5, 'Audoux' , 'Thierry ') ; 

Configuration des droits dun utilisateur 

Dans les ateliers du chapitre 13, le fichier de connexion a la base de donnees MySQL a 
ete configure avec l'utilisateur root. Par defaut, cet utilisateur root n'a pas de mot de 
passe et a tous les droits sur toutes les bases. 

Evidemment, si vous desirez mettre en ligne votre application, il ne faut pas utiliser cet utili- 
sateur par defaut pour des raisons de securite evidente et creer un utilisateur specifique a votre 
application avec un mot de passe securise et des droits restraints a la base de votre application. 

En general, les parametres de cet utilisateur sont imposes par votre hebergeur mais il est 
judicieux dans ce cas de configurer les memes parametres sur votre base de developpement 
afin d'eviter de modifier le fichier de connexion MySQL a chaque mise a jour. Pour 
vous accompagner dans la creation de ce nouvel utilisateur, nous vous proposons de 
creer un compte utilisateur machine pour acceder exclusivement a la base machineasous. 



Le compte root par defaut 

Si vous ne creez pas de compte utilisateur, vous pouvez quand meme configurer une connexion a la base 
en utilisant le compte root preconfigure par defaut dans MySQL (dans ce cas, il faut remplacer dans le 
fichier de connexion le nom de l'utilisateur par root et ne pas indiquer de mot de passe). Attention ! 
L'usage de ce compte root sans mot de passe est evidemment limite a un usage local. Vous devez impe- 
rativement vous assurer que tous les comptes mysql possedent bien un mot de passe si votre base de 
donnees doit etre reliee a Internet. 



Placez-vous dans la page d'accueil du gestionnaire (cliquez sur l'icone representant une 
petite maison correspondant au lien Accueil en haut de la partie gauche de 1' interface) 
puis cliquez sur le lien Privileges dans la liste des actions de la partie droite de 1' interface. 
Dans la nouvelle fenetre cliquez sur le lien Aj outer un utilisateur en bas du tableau des 
utilisateurs (voir figure 22-5). 
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Figure 22-5 

Cet ecran affiche les utilisateurs existants de votre base de donnees. En cliquant sur le lien Creer un utilisateur, 
vous pouvez accede r au formulaire d'ajout d'un nouvel utilisateur. 

Saisissez le nom d' utilisateur machine et selectionnez Local (localhost) dans le menu 
deroulant Serveur (voir figure 22-6). Saisissez ensuite deux fois le mot de passe corres- 
pondant a cet utilisateur (vous pouvez aussi utiliser le generateur de mot de passe si celui-ci 
n'est pas impose par votre hebergeur) et cliquez sur le bouton Executer (situe tout en bas 
de cet ecran) sans valider d'autres options de cette page. A noter que si vous validez un 
droit a ce niveau (privileges globaux), cela permettrait a 1' utilisateur de 1' exploiter sur 
toutes les bases du serveur MySQL et non exclusivement sur la base machineasous. 



*m 



om. 



Base de donnees 
machineasous [ » 



machineasous (2) 

B gains 
n joueurs 



gjj Serveur: localhost 

xBases de donnees S ^SQL ^Etat ^Variables [[T]Jeuxde caracteres fcj^Moteurs 
^Privileges ^processus ^Exporter ^Importer 



- Ajouter un utilisateur 

- Information pour la connexion 

Namd'uolisateun | Entrez une yaJeur: 



Serveur I Local 




Mot de passe: | Entrez une valeur: 
Entrer a nouveau 

Generer un mot de | Generer 1 1 Copier | 
passe: 



Figure 22-6 

Pour ajouter un nouvel utilisateur, il suffit d'indiquer son nom, son serveur (en general localhost) et son mot de passe. 



Apres validation, un ecran vous informe que le nouvel utilisateur machineOlocalhost 
(c'est-a-dire l'utilisateur machine depuis un acces localhost) a bien ete cree et vous 
propose de modifier eventuellement ses attributions. Un peu plus bas, dans le meme 
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ecran de confirmation, se trouve une rubrique intitulee Privileges specifiques a une base 
de donnees. Selectionnez la base machineasous dans le menu deroulant (voir figure 22-7) 
pour acceder au formulaire d'ajout d'un privilege d'acces a la base machineasous. 



php 



3PO 



Base de donnees 

machineasous (" 



machineasous (2) 

B joueurs 



»a une base de domees- 



Base de donnees Privileges "Grant" Privileges specifiques a une table Action 

aucune 
Ajouter des privileges sur cette base de donnees: Entrez grie valour: 



Modifier le mot de passe 

O aucun mot de passe 
O Mot de passe: 




Figure 22-7 

Apres I ' enregistrement du nouvel utilisateur, le gestionnaire affiche un ecran de confirmation qui indique que I 'utilisa- 
teur niachine@localhost a bien ete ajoute a la table users. En bas de ce mime ecran, un menu deroulant permet de 
selectionner une base de donnees existante pour attribuer des privileges specifiques a V utilisateur machine. 

Cochez les droits que vous desirez attribuer a 1' utilisateur pour la base concernee (par 
exemple, autorisez tous les droits relatifs aux donnees et a la structure mais pas a 1' admi- 
nistration) puis validez en cliquant sur le bouton Executer (voir figure 22-8). 
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Figure 22-8 

Le tableau des privileges specifiques a une base de donnees permet de definir un droit d'acces a une base specifique. 



Les droits de 1' utilisateur machine sont desormais configures pour acceder exclusivement a 
la base machineasous. Si vous consultez ensuite la vue d'ensemble des utilisateurs (cliquez 
sur l'onglet Privileges en haut de l'ecran), vous constatez qu'un nouvel utilisateur machi ne 
s' affiche (voir figure 22-9). 
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Figure 22-9 

Dans la vue d'ensemble des utilisateurs, on constate que Vutilisateur machine est desormais configure. 

Sauvegarde et restauration dune base de donnees 

II est hautement recommande de faire une sauvegarde de secours de ses programmes et il 
en est de meme pour les bases de donnees. Cependant, la demarche est quelque peu diffe- 
rente, car nous n'allons pas copier un simple fichier, mais enregistrer les requetes 
MySQL qui ont ete utilisees pour creer la structure de la base et eventuellement celles qui 
ont permis d'inserer des enregistrements dans les tables. Une fois enregistrees dans un 
fichier, ces requetes peuvent ensuite etre utilisees dans phpMy Admin pour recreer a 
l'identique la base sauvegardee (voir la procedure de restauration). 



Sauvegarde 



Passons maintenant a la pratique. Pour cela, vous allez commencer par vous assurer que 
la base a sauvegarder est bien selectionnee dans la liste deroulante de gauche (voir 
repere 1 de la figure 22-10). Dans la partie droite, cliquez sur l'onglet Exporter situe en 
haut de l'ecran (voir repere 2 de figure 22-10). La nouvelle page de droite contient 
plusieurs cadres. Le premier, intitule Exporter, permet de selectionner les tables a expor- 
ter et le format d' exportation. Selectionnez toutes les tables en cliquant sur le lien Tout 
selectionner (voir repere 3 de la figure 22-10) et conservez le format SQL initialise par 
defaut. Le second cadre, intitule options SQL, vous permet d'ajouter un DROP TABLE (pour 
ce faire, cochez l'option portant le meme nom dans le cadre secondaire nomme Struc- 
ture : voir repere 4 de la figure 22-10) qui supprimera automatiquement les anciennes 
tables de la base avant d'y inclure les nouvelles, ce qui evite de generer un message 
d'erreur si une table de meme nom existait deja. C'est dans ce meme cadre que Ton peut 
choisir d' exporter la structure, les donnees ou les deux ensembles (dans notre cas, nous 
validerons les deux). Le troisieme cadre, intitule Transmettre, vous permet d'indiquer 
que vous desirez generer un fichier (pour ce faire, cliquez dans la case a cocher intitulee 
Transmettre : voir repere 5 de la figure 22-10) et de choisir le type de compression a utiliser 
(choisissez l'option Aucune). 
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Figure 22-10 

Pour sauvegarder une base, on utilise le formulaire de la rubrique Exporter. 



Validez en cliquant sur le bouton Executer place en bas de l'ecran (voir repere 6 de la 
figure 22-10). Une premiere fenetre vous demande de confirmer l'enregistrement 
(cliquez sur Enregistrer pour confirmer). Un deuxieme ecran vous demande de selection- 
ner le repertoire de sauvegarde. Verifiez l'emplacement du repertoire qui vous est 
propose par defaut ou choisissez un repertoire dedie aux archives de votre projet, afin de 
savoir ou retrouver votre fichier lors de la restauration (vous pouvez par exemple creer un 
repertoire archives a la racine de votre site Web et creer dans celui-ci un repertoire « sql » 
qui regroupe toutes les sauvegardes de votre base de donnees). Apres validation, l'enre- 
gistrement s'effectue. Nous vous suggerons d'utiliser l'explorateur Windows pour vous 
assurer que le fichier est bien enregistre a l'endroit indique. Si vous ouvrez ce fichier 
machineasous .sql avec un simple editeur (Bloc-notes, par exemple), vous devez retrouver 
les requetes destinees a recreer des structures de tables conformes a l'origine (CREATE TABLE), 
puis a provoquer des ajouts d'enregistrements dans les tables (INSERT INTO) selon les 
valeurs actuellement presentes dans la base. 
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Restauration 



Pour restaurer une base, il faut que celle-ci soit deja creee (revoir si besoin la procedure 
de creation d'une base dans le chapitre 13). Ensuite, selectionnez-la dans la liste de 
gauche et cliquez sur le nom d'une des tables de cette base. 



A noter 

La base machineasous doit etre creee, mais peut etre vide de toute table. Si ce n'est pas le cas, nous 
vous invitons a supprimer les tables pour bien comprendre la procedure de restauration (pour supprimer 
une table, cliquez sur le lien Supprimer correspondant). 



Dans la partie droite, cliquez sur l'onglet Importer en haut de l'ecran (voir repere 1 de la 
figure 22-11). La nouvelle page propose un formulaire vous invitant a selectionner le 
flchier a importer. Cliquez sur le bouton Parcourir (voir repere 2 de la figure 22-11). 
Selectionnez ensuite, dans l'explorateur, le fichier precedemment sauvegarde et cliquez 
sur Ouvrir pour valider votre choix. Le chemin du fichier est alors copie dans le champ a 
gauche du bouton Parcourir (voir repere 3 de la figure 22-1 1). II ne vous reste plus qu'a 
cliquer sur le bouton Executer pour demarrer la restauration. Toutes les requetes du 
fichier s'executent alors et s'affichent en haut de l'ecran. Au terme de la restauration, les 
tables de la base sont de nouveau visibles dans le gestionnaire. 
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Figure 22-11 

Pour la restauration d'une base de donnees, ilfaut utiliser le formulaire de la rubrique Importer en precisant 
V emplacement du fichier de restauration machineasous. sql. 
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Configuration 

d'une infrastructure 

serveur locale pour Mac 

Mamp, une infrastructure serveur pour Mac 

Depuis les systemes X, les machines Apple sont des ordinateurs Unix BSD qui integrent 
un serveur Web Apache et le preprocesseur PHP par defaut. Le serveur Apache et les 
modules PHP sont pre-installes, mais ne sont pas actives par defaut. Par contre, la base de 
donnees MySQL et son gestionnaire phpMyAdmin ne sont pas pre-installes sur les 
Macintosh. 

II est done necessaire de configurer votre ordinateur Macintosh afin de disposer d'une 
infrastructure serveur locale et de pouvoir developper et tester des sites dynamiques en 
local. 

Pour cela, vous disposez de deux alternatives : 

• Activer le serveur Apache et PHP puis installer les applications manuellement. 

• Installer automatiquement une suite de logiciel Mamp : Macintoch, Apache, MySQL, 
PHP (semblable a Wamp5 pour Windows). 

La seconde solution etant beaucoup plus simple et rapide a mettre en place, nous vous 
proposons ci-apres de vous guider pas a pas dans son installation. 

Meme si certains parametres sont differents (numero de port, etc), sachez que toutes les 
pages dynamiques presentees dans cet ouvrage pour l'environnement Windows peuvent 
etre realisees de la meme maniere avec votre Macintosh. 
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Installation de Mamp 

Avant toute chose, vous devez commencer par telecharger le dernier package Mamp sur 
le site de son editeur (voir figure A-l, http://www.mamp.info). Pour votre information, sachez 
que pour cette demonstration, nous avons utilise la version Mamp 1 .7, mais la demarche 
est semblable si vous utilisez une version plus recente. 
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Figure A-1 

Saisissez I'ctdresse de V editeur de Mamp (http://www.mamp.info) dans votre navigateur puis cliquez sur le bouton 
Download now situe en has a droite de Vecran. 



Cliquez sur le bouton Download now de la page d'accueil du site (voir figure A-l). Dans 
la seconde fenetre, choisissez 1' option correspondante a votre ordinateur puis telechargez 
le package sur votre ordinateur dans le dossier de votre choix et cliquez sur le package 
pour demarrer 1' installation. Une fenetre avec la procedure d' installation de Mamp doit 
ensuite apparaitre. Ouvrez une fenetre Finder et cliquez sur la categorie Applications 
(voir figure A-2) puis glisser le dossier Mamp dans votre repertoire Applications. La 
suite Mamp est maintenant installee sur votre ordinateur. 
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Figure A-2 

Apres avoir ouvert le repertoire Applications dans une fenetre Finder, vous devez y copier le dossier complet 
de Mamp sans creerd' autre sous-repertoire. 



Utilisation de Mamp 

Une fois la suite Mamp installee sur votre ordinateur, nous vous suggerons de creer sur 
votre bureau un alias du fichier application situe dans le dossier Mamp (voir la figure A- 
3). Cliquez ensuite sur cet alias pour demarrer l'application. Une nouvelle fenetre doit 
alors apparaitre (voir la figure A-3) dans laquelle les deux voyants representant les 
serveurs Apache et MySQL doivent progressivement passer au vert. Dans cette meme 
fenetre, vous pouvez configurer les differentes options de Mamp en cliquant sur le 
bouton Preferences. Cependant, nous vous conseillons de garder les parametrages par 
defaut dans un premier temps. A noter que pour reduire cette fenetre, vous devez cliquer 
sur le bouton orange situe en haut et a gauche de la fenetre et non cliquer sur le bouton 
Quitter qui a pour incidence de fermer toutes les applications Mamp et, du meme coup, 
les serveurs Apache et MySQL. 

Le bouton « Ouvrir la page d'accueil » vous permet d'acceder a une page Web regrou- 
pant les differentes applications de la suite Mamp. La premiere page Start vous informe 
des parametres a utiliser pour acceder au serveur MySQL (voir figure A-4). La seconde 
page phpinfo est tres interessante car elle affiche toutes les informations correspondant a 
la configuration actuelle de PHP. La page phpMy Admin permet d'acceder au gestionnaire de 
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Figure A-3 

Pour faciliter lesfuturs demurrages de Mamp, nous vous conseillons de creer un alias dufichier application 
sur voire bureau. 

la base de donnees MySQL ou bien au gestionnaire du systeme de donnees integre a 
PHP, SQLite (ce gestionnaire n'est pas utilise dans le cadre de cet ouvrage). Enfin, la 
derniere page FAQ vous permet de connaitre les differentes versions des applications de la 
suite Mamp et repond aux questions frequemment posees. 

Par la suite, l'utilisation de 1' infrastructure serveur MAMP sera semblable a celle decrite 
dans les ateliers de cet ouvrage, hormis le fait que les adresses du Web Local et du 
serveur MySQL devront etre accompagnees d'un numero de port specifique comme nous 
vous le rappelons ci-dessous : 

Adresse du Web Local : 



http: //local host: 
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Bienvenue dans MAMP 

Si vous pouvei voir celte page, MAMP est install* sur votre Mac et tout fonctionne ' 

Pour affichef la configuration de PHP. vous pouvez examiner le resultat de pripinfo . 

l£j vous pouvez adminisirer eAcceterator. 

La base de donntes MySQL peut ftire adminlstree via phpMv Admin . 

Pour vous connecter au serveur MySQL dans vos propres scripts PHP, utilise* les parametres survants : 

H6te: local host 
;port: BBB9] 
Utilisateur: root 
Mot de passe: root 

Exemple: 

Slink - Byaql_co!iMK:t ( ' localhofltiSfla*' , 'root', 'root' J; 

ou vous pouve* vous connecter A I'aide d'un socket UNIX : 

Socket: /ApplicatiOns/MAMP/tmp/mysql/mysql.soclc 
Utilisateur; root 
Mot de passe: root 

Exemple: 

Sllnx - i^ao;l_co^ect( ' ;/AppLlcation&/KAKF/t»)p/ny*ql/ityio;l.*ock H , 'root', 'root'); 
"Have fun and enjoy", 
L'equipe mamp 



c 



Figure A-4 

La page Start vous informe des parametres MySQL a utiliser dans vos scripts PHP et vous permet d'acceder 
au gestionnaire de la base de donnees phpMyAdmin. 



Adresse du serveur MySQL : 

http://localhost:8889 

En ce qui concerne la configuration du site SITEajax avec Dreamweaver, vous devrez 
creer puis selectionner un dossier SITEajax place dans le repertoire htdocs lui-meme situe 
dans Applications/MAMP/. 

Le chemin complet du repertoire contenant les fichiers sera done le suivant : 

Systeme:Appl i cat ions: MAMP: htdocs: SITEajax 

De meme, si vous desirez utiliser la fonctionnalite Apercu dans le navigateur (attention, 
le raccourci sera Alt + F12 avec le Dreamweaver sous Mac), vous devrez alors configurer 
le prefixe d'url du serveur d'evalution avec l'adresse suivante : 



http: //local host :8888/SITEajax/ 



B 
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Conseils pour bien programmer 

Pour bien programmer et creer des scripts performants, quelques regies doivent etre 
respectees. 

Utilisez I'indentation 

L' indentation correspond a la mise en forme des blocs de code grace a des tabulations 
differentes selon le niveau d' imbrication des structures de boucle ou de choix dans 
lesquels ils se trouvent. Cela met en valeur le debut et la fin des boucles et evite notamment 
d'oublier des accolades de fin ou de debut. 

Avec l'editeur de Dreamweaver, vous pouvez decaler facilement le code a partir du menu 
Edition>Code de re trait (ou encore plus facilement avec la touche Tabulation). Toutes les 
nouvelles lignes seront decalees du meme espace. Pour revenir d'un pas de decalage a 
gauche, utilisez l'option Decalage negatif du menu Edition (ou utilisez la touche Back- 
space). 

Commentez votre code 

Qu'il soit maintenu par le programmeur lui-meme ou par une tierce personne, un 
programme doit toujours etre parfaitement commente (vous me remercierez peut-etre 
dans quelques mois lorsque vous devrez modifier votre propre code...). Les commentai- 
res d'un programme doivent porter sur des informations liees au contexte de 1' application 
et non rappeler toutes les descriptions des fonctions issues du manuel du langage utilise. 

Les commentaires permettent aussi de preciser les liens qui existent entre plusieurs 
elements d'un code, comme l'accolade d'ouverture et de fin d'un bloc. Une solution 
astucieuse consiste a commenter chaque accolade de fin de bloc avec un rappel de la 
condition de choix ou de boucle qui lui a donne naissance. 
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Avec l'editeur de Dreamweaver, il est pratique de commenter un ensemble de lignes en 
utilisant les boutons lateraux (places a gauche de l'editeur de code) Appl iquer un commen- 
tai re et Supprimer un commentaire. 

Pour appliquer des commentaires, veillez bien a utiliser la syntaxe de PHP ou de Java- 
Script s'ils sont integres dans une zone de code, soit // pour un commentaire sur une 
simple ligne ou /* et */ pour un commentaire sur plusieurs lignes et la syntaxe des 
commentaires HTML, a savoir les balises < ! -- et -->, s'ils sont places en dehors des balises 
PHP ou JavaScript. 

Bien nommer les variables et les fichiers 

Le choix du nom d'une variable est important. Des qu'une variable concerne un element 
fonctionnel du programme, nommez-la avec un nom explicite en rapport avec sa fonc- 
tion. Vous pouvez par exemple utiliser la « convention du chameau » (appelee aussi 
« CamelCase minuscule ») qui consiste a concatener une courte phrase qui caracterise la 
variable en ne conservant en majuscule que la premiere lettre de chaque mot (exemple en 
PHP : prix du produit deviendrait SprixProduit). En revanche, les variables d'utilisation 
ponctuelle, comme les compteurs de boucle ou les variables de fonction, peuvent conser- 
ver des appellations courtes et generiques ($i par exemple) car leur portee est limitee au 
bloc de la fonction et ne risque pas d'entrer en conflit avec une autre variable de me me 
nom. 

Pour les noms des fichiers, elaborez une convention de nommage afin de definir un 
prefixe commun pour tous les fichiers qui realisent une action d'une meme fonctionna- 
lite. Cela permet d'identifier les fichiers, mais aussi de les regrouper facilement par fonc- 
tionnalite dans l'arborescence d'un repertoire a l'aide d'un simple tri alphabetique (par 
exemple en PHP caddieModif . php et caddieSupp.php ou en JavaScript fonctionsAjax. js et 
fonctionsMachine. js). 

L'erreur du point-virgule 

Parmi les erreurs habituelles, l'oubli du point-virgule pour terminer une instruction est 
certainement la plus frequente. Aussi, nous vous recommandons de n'ecrire qu'une seule 
instruction par ligne afin de verifier facilement la presence du point virgule terminant 
chaque ligne. 

Si le point virgule est indispensable a la fin de chaque instruction PHP, il n'est pas 
toujours obligatoire en JavaScript. Cependant, je vous conseille quand meme de mettre 
un point-virgule a la fin de chaque instruction JavaScript, cela vous evite de l'oublier 
lorsqu'il est obligatoire et rend votre code plus lisible. 

Utilisez les fonctions 

Si vous decoupez votre code en parties reutilisables, vous pouvez creer des fonctions 
faciles a exploiter dans toutes les pages du site. En outre, le code du script principal est 
plus leger et bien plus lisible. Rassemblez ces parties reutilisables dans un fichier 
commun (nomFichier.inc.php en PHP ou nomFonction. js en JavaScript) que vous pouvez 
appeler au debut de chaque page grace a la commande requireO en PHP ou avec une 
balise <script> en JavaScript. 
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Utilisez les fragments de code 

Pour etre encore plus efficace dans le developpement de vos applications et pour gagner 
en productivity, utilisez les fragments de code de Dreamweaver. Cela vous evite de 
ressaisir a chaque developpement des parties de code frequemment utilisees. Par defaut, 
Dreamweaver est livre avec des fragments de code standard classes par theme que vous 
pouvez trouver dans le panneau Fichier/Fragments de code. Cependant, la version stan- 
dard comporte peu de fragments (en PHP, il faut d'ailleurs creer un repertoire PHP alors 
qu'avec JavaScript, ce repertoire existe deja). II vous faudra done developper vos propres 
fragments avant de pouvoir les integrer par la suite dans vos pages. Vous pouvez aussi 
importer des groupes de fragments de code afin de disposer rapidement d'un ensemble de 
ressources creees par des developpeurs chevronnes. 

Construisez brique par brique 

De meme qu'un macon construit une maison brique par brique sur des fondations soli- 
des, le programmeur doit commencer par bien analyser le projet dans son ensemble pour 
definir sa structure et elaborer des modules correspondant a chaque fonctionnalite. Reali- 
sez des essais pour chacun des modules des qu'ils sont operationnels et n'attendez 
surtout pas que tout le site soit cree pour les passer au banc de test. 

Techniques de debogage PHP 
Analyse d'un message d'erreur PHP 

Avant d'etre envoyee vers le navigateur, la syntaxe des scripts PHP est d'abord analysee 
puis executee. Lors de ces deux etapes peuvent apparaitre des erreurs de syntaxe ou de 
semantique. Des erreurs liees a la conception de votre programme (erreur logique) ou au 
contexte dans lequel il s' execute (erreur d'environnement) peuvent egalement se 
produire. Selon le type d'erreur, des messages differents sont envoyes par PHP et s'affi- 
chent dans votre navigateur. Dans un premier temps, il est important de bien analyser ces 
messages d'erreur. Pour ce faire, il faut connaitre la syntaxe du message d'erreur et les 
differents types d'erreurs qui peuvent se produire. 

Tableau B-1 Syntaxe d'un message d'erreur 

message_erreur in nom_fichier on line nunMigne 

iveau_erreur : les niveaux d'erreur peuvent etre : 

- Parse_erTor : erreur de syntaxe lors de I'analyse ; 

- Fatal_error : erreur qui arrete le script ; 

- Warning : erreur qui se contente d'afficher un avertissement mais qui permet de poursuivre le 
script. 

message_erreur : message correspondant a I'erreur rencontree (les messages sont souvent identi- 
ques au niveau). 

nom_fichier : nom du fichier dans lequel I'erreur a etedetectee. 
num_l i gne : numero de la ligne ou se trouve theoriquement I'erreur. 




Voici un exemple d'erreur : 

//ligne de script qui a produit I'erreur (point-vi rgule oublie en bout de ligne) 

echo "bonjour" 

//la version corrigee serait : echo "bonjour"; 
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I //message d'erreur affiche dans le navigateur : 
Parse error: parse error, unexpected "INVARIABLE, expecting ',' or ';' 
in c:\wamp\www\sitephp\debugphp\erreurl.php on line 4 

Si on analyse l'erreur ci-dessus, on peut en deduire les informations suivantes : 

ni veau_erreur : Parse error ; 

message_erreur : « parse error, unexpected INVARIABLE, expecting ',' or ';' » ; 

nom_fichier : c:\wamp\www\sitephp\debugphp\erreurl.php ; 

num_ligne : line 4. 

Utilisez I'equilibrage des accolades 

Le non-respect de I'equilibrage des accolades d'ouverture et de fermeture est frequem- 
ment a l'origine des erreurs de syntaxe. Utilisez l'equilibreur d' accolades que l'editeur 
de Dreamweaver met a votre disposition pour vous assurer que votre programme respecte 
bien cette regie. Pour activer I'equilibrage d'accolades, placez votre pointeur a droite de 
la premiere accolade du bloc a tester, puis activez le testeur (selectionnez Edition>Equi- 
librer les accolades ou utilisez le raccourci clavier Ctrl + ,). Toute la zone correspondant 
a un bloc equilibre (selon le niveau d'imbrication) est alors automatiquement selection- 
nee. Si vous renouvelez le test, la zone selectionnee s'etend au niveau d'imbrication 
superieur et ainsi de suite jusqu'au dernier bloc. Un son signale que le test est termine. 
Verifiez qu'il ne reste aucune accolade en dehors de la zone selectionnee. Dans l'affirma- 
tive, ajoutez 1' accolade manquante et renouvelez le test. Si le testeur ne peut pas poursuivre 
sa recherche des le debut du test, il emet un son pour vous le signaler. 

Detectez les erreurs de logique 

Les erreurs de syntaxe ou de semantique sont toujours accompagnees d'un message 
d'erreur qui precise le fichier et la ligne ou se trouve l'erreur : il suffit en general de revoir 
le code situe a ce niveau pour resoudre le probleme. En ce qui concerne les erreurs de 
logique, il est parfois difficile de localiser les lignes de code qui sont a l'origine du 
mauvais fonctionnement. Dans ce cas, le moyen le plus simple consiste a commenter les 
lignes (utilisez //) ou les blocs de code (utilisez /* et */) susceptibles de provoquer 
l'erreur et a tester de nouveau le programme. Ainsi, par recoupements, vous pouvez 
circonscrire l'erreur de maniere precise. 

La fonction phplnfoQ 

La fonction phpi nfo( ) affiche tous les parametres de la configuration de PHP. Pour creer 
une page d'affichage de ces parametres, saisissez cette fonction dans une page PHP (qui 
est nommee phpinfo.php, par exemple), comme indique ci-dessous, et appelez-la depuis 
le Web local ou depuis votre serveur distant. Vous pouvez egalement l'ajouter en bas de 
vos pages en cours de test, afin d'afficher les differentes variables actives et connaitre 
leur valeur. 

Voici le code a saisir dans le fichier phpinfo.php pour afficher la configuration de PHP : 

<?php 

phpinfoO ; 
?> 
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Outre tous les parametres PHP, qui peuvent s'averer tres utiles pour connaitre la configu- 
ration de votre serveur (et la comparer avec celle de votre serveur local s'il s'agit d'une 
erreur contextuelle), la fonction phpinfo( ) affiche toutes les valeurs des variables creees 
avec des requetes GET ou POST ainsi que le contenu des cookies. 



Les pieges 

L'examen des valeurs affectees a certaines variables pour differents endroits du script est 
souvent necessaire au depannage. Pour ce faire, vous pouvez aj outer dans votre page a 
tester des pieges qui affichent les noms des variables a tester suivis de leur valeur. Vous 
pourriez evidemment vous contenter d'ajouter dans votre code une simple fonction echo 
$varl ; mais si vous desirez tester plusieurs variables dans la meme page, cela devient vite 
illisible. Nous vous suggerons done d'utiliser le code ci-dessous, qui presente l'avantage 
de rappeler le nom de la variable et d'inserer automatiquement un re tour a la ligne apres 
chaque test. Apres son utilisation, vous pourrez localiser rapidement tous les endroits oil 
vous avez insere un piege. L'astuce consiste a lancer une recherche sur le mot PIEGE et a 
commenter la ligne ou a la supprimer completement si tous les problemes sont resolus. 

echo '$varl='.$varl.'<br>'; // PIEGE valeur 

Dans certains cas, l'erreur peut provenir du type de la variable traitee. Pour tester cette 
information dans le programme, ajoutez l'affichage de son type, avec la fonction 
gettype( ) a la suite du piege precedent : 

echo '$varl='.$varl.' de type ' .gettype($varl) . ' <br>'; //-PIEGE type 

Enfin, pour depanner les scripts utilisant des variables de type tableau, employez la fonc- 
tion print_r( ) que nous avons presentee lors de l'etude des tableaux dans le chapitre 6. 
Nous vous conseillons d'ailleurs de l'ajouter a vos fragments de code de Dreamweaver, 
ainsi par la suite, il suffira de saisir le nom du tableau a tester et a cliquer sur ce fragment 
pour que le code complet du piege soit ajoute autour du nom du tableau. 

Exemple avec un simple tableau $tabl : 

echo "<pre>"; 

print_r($tabl) ; // PIEGE tableau 

echo "</pre>"; 

Enfin, vous aurez tres frequemment a tester les variables HTTP de votre page (lors de 
l'envoi d' informations issues d'un formulaire ou d'une requete Ajax, ou memorisees 
dans des variables de session...), pour memoire ces informations sont stockees, elles 
aussi, dans des tableaux et l'utilisation de la fonction print_r( ) vous sera d'une grande 
utilite pour connaitre le contenu des ces variables. 

Exemple avec un tableau $_P0ST : 

I echo "<pre>"; 
print_r($_POST); //-- --PIEGE tableau 
echo "</pre>"; 

Les fonctions de debogage 

Une solution plus elaboree consiste a developper une fonction activee lors du debogage 
afin d'afficher ou d'enregistrer une trace de Taction realisee. Pour activer ou desactiver 
cette fonction, vous pouvez la passer dans l'URL en lui affectant la valeur 1 pour activer 
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le debogage (exemple : mapage.php?modedebug=l). Vous pouvez ajouter localement 
cette fonction au code de la page, mais il est plus judicieux de l'integrer dans un fichier 
de fonctions appele par une commande requireO. Vous pouvez trouver ci-dessous un 
exemple de fonctions a utiliser lors de la mise au point de vos programmes en local : 

<?php 

//fonction de debogage a inserer dans la page testee 

// initialisation des variables 

i f ( ! i sset ( $_GET[ 'modedebug ' ] ) ) $_GET[ 'modedebug ' ]=0; 

el se $modedebug=$_GET[ 'modedebug'] ; 

//fonction de debogage a inserer dans la page testee 

function debugphp($varl) 

{ 

if($GLOBALS["modedebug"]==l) 
echo ' PIEGE: $varl=' .Svarl. ' de type ' .gettype(Svarl) . ' <br>"; 

} 
//affectation d'une variable pour les besoins de 1 'exemple 
$var2="bonjour" ; 

//insertion du piege pour tester la variable $var2 
debugphp($var2); 
?> 

Si vous testez 1' exemple ci-dessus en passant un parametre dans l'URL pour indiquer que 
vous desirez afficher le piege (exemple : mapage.php?modedebug=l), votre navigateur doit 
afficher le texte du piege ci-dessous : 

| PIEGE : $varl=bonjour de type string 



Attention ! 

Si la variable que vous desirez tester n'est pas initialisee, des messages d'erreur Undef i ned van' abl e 
peuvent apparaitre a I'ecran selon la configuration de votre serveur. Pour eviter cela, ajoutez la ligne de 
code suivante avant votre piege. La syntaxe $varl est valable pour une variable interne, mais s'il s'agit 
d'une variable HTTP issue d'un formulaire, d'une session, d'un cookie ou encore passee dans l'URL, utili- 
sez le tableau de variable adapte ($_XXX['varl']) : 
if ( !isset($varl) ) $varl="variable inconnue"; 



Suppression des messages d'erreur 

Si, lors du developpement, tous les messages doivent etre affiches afin de mettre au point 
le programme, en production il est preferable que ces messages ne soient pas affiches 
dans la page Web visible par tous les internautes. Vous pouvez neutraliser 1' apparition de 
ces messages a I'ecran en ajoutant un @ devant l'expression ou la fonction concernee. 
Considerez cette methode comme une solution de depannage en attendant de trouver la 
cause du probleme ou pour empecher l'affichage d'un simple warning qui n'a pas d'inci- 
dence sur le fonctionnement du script de la page. 

Dans cet exemple, nous allons creer une erreur de division par : 

|$varl=0; //simulation d'une erreur d'affectation pour les besoins du test 
$testerreur=@(5/$varl) ; //ici il n'y aura pas de message d'erreur 
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Testez vos requetes SQL dans phpMyAdmin 

Si vous developpez des pages integrant des requetes SQL, il est possible que l'erreur 
provienne d'un resultat errone ou manquant remonte par la base, voire d'une erreur de 
syntaxe dans la requete SQL. Pour eviter ce genre de probleme, testez la requete utilisee 
avant de l'integrer dans le script PHP de la page dynamique. 

Pour tester une requete, il faut d'abord ajouter un piege dans le code PHP afin d'afficher 
la requete SQL a l'ecran (exemple : echo $query). Puis afficher la page dans le navigateur 
pour la copier puis la coller dans la zone Executer une requete du gestionnaire phpMyAd- 
min. Apres avoir clique sur le bouton Executer, le resultat de la requete doit alors s' affi- 
cher dans l'ecran du gestionnaire. Si une erreur est signalee ou si le resultat ne corres- 
pond pas a vos attentes, corrigez la requete directement dans le gestionnaire. Une fois 
que le resultat vous convient, reportez vos modifications dans le script PHP avant de la 
tester a nouveau dans la page dynamique. 

Techniques de debogage JavaScript 

Une bonne methode pour developper en JavaScript consiste a commencer par mettre au 
point la structure XHTML, la mise en forme CSS et la programmation JavaScript avec 
Firefox puis terminer par 1' adaptation aux autres navigateurs courants que Ton retrouve 
sur Internet, a savoir Internet Explorer bien sur, mais aussi Safari et Opera. 

En effet, si le navigateur Firefox a deja le merite de respecter les standards du W3C 
(contrairement a Internet Explorer...), il a aussi l'enorme avantage de disposer d'une 
multitude d' extensions, dont certaines vous facilitent la vie pour mettre au point vos 
programmes. Firebug fait partie de celles-ci et j'espere que vous avez deja apprecie son 
usage lors de la realisation des premiers ateliers de cet ouvrage (revoir si besoin le chapi- 
tre 8 dans lequel nous detaillons ses principales fonctionnalites). 

La fonction alert() 

La maniere la plus courante d'afficher l'etat d'une variable lors de 1' execution d'un 
programme JavaScript consiste a utiliser la fonction alertO qui affiche l'information 
dans une boite de dialogue. 

Par exemple, si vous desire z connaitre la valeur de la variable montant a un moment parti- 
culier de votre programme, il suffit d'ajouter l'instruction suivante a l'endroit desire : 

alert( 'valeur de montant ='+montant) ; 

Cependant, cette methode n'est pas sans defaut : d'une part, elle bloque l'application tant 
que vous n'avez pas valide la boite de dialogue et, d' autre part, elle devient vite envahis- 
sante en affichant de nombreuses donnees. 

L'element title 

Pour eviter d'etre bloque par la fenetre d'alerte, une technique tres simple consiste a 
renvoyer les informations a observer dans la balise de titre de la fenetre du navigateur. Le 
code de l'exemple ci-dessous permettra ainsi d'afficher la valeur prise par parametres 
(soit nom=Def ranee) a l'endroit ou le code a ete ajoute. 

Iparametres="nom=Def ranee" ; 
document. title=paramet res; 
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La console de Firebug 

Avec la console de Firebug il n'est plus utile de faire appel a une fonction alert( ) qui 
bloque votre application ou encore a 1' element title qui reste tres limite en ce qui 
concerne la taille de la valeur a afficher. 

En effet, la console de Firebug permet d' afficher un journal de differents messages qui 
ont ete integres au prealable dans le code. Firebug propose differentes methodes pour 
permettre de qualifier la nature du message par un affichage different ; debug ( ) pour les 
messages de debogage, infoO pour une simple information, warnO pour un avertisse- 
ment et error ( ) pour signaler une erreur. Toutes ces methodes fonctionnent de la meme 
maniere et vous etre libre d'utiliser celle qui convient le mieux a la situation. 

En guise d'exemple, voici le code que vous devez ajouter dans votre programme pour 
pouvoir afficher un message d'information avec l'etat d'une variable (en l'occurrence 
montant dans l'exemple ci-dessous) dans la fenetre de Firebug sans perturber le fonction- 
nement de 1' application : 

console. info( 'valeur de montant ='+montant) ; 

L'inspecteur DOM de Firebug 

Le reflexe du developpeur Web est souvent d' afficher le code source de la page en cours 
de developpement. Cependant, pour les programmes JavaScript, cette technique est d'un 
interet tres limite. En effet, comme JavaScript modifie dynamiquement les elements de la 
page HTML, le code source ne correspond plus au resultat affiche dans la page du navi- 
gateur car les modifications du JavaScript sont effectuees sur la hierarchie du DOM 
placee dans la memoire du navigateur et non sur le code source initialement charge dans 
le navigateur. 

Heureusement, avec l'outil de debogage Firebug, il est tres facile de consulter le DOM de la 
page a un moment donne. II suffit pour cela de derouler l'arborescence DOM en cliquant 
successivement sur les petits + qui precedent chaque noeud element de la hierarchie de la 
page pour acceder ainsi a l'etat d'un element specifique. 

Mais la console Firebug n'est pas limitee a une simple consultation du DOM : elle vous 
permet aussi de modifier en temps reel les proprietes des differents elements, voire d'en 
ajouter de nouvelles. De meme, pour ceux qui ont tendance a se perdre dans l'arbores- 
cence du DOM (il est vrai qu'il n'est pas toujours simple de s'y retrouver. . .) sachez que 
vous pouvez acceder directement a l'element du DOM desire en faisant un clic droit sur 
l'objet concerne dans la fenetre du navigateur et en selectionnant Inspect Element. La 
fenetre DOM de Firebug affiche alors automatiquement le noeud correspondant a l'objet 
selectionne. 

L'inspecteur HTML de Firebug 

Si la fenetre du DOM de Firebug vous effraie, vous devriez alors trouver un grand interet 
dans sa fenetre HTML. En effet, cette fenetre ne represente pas un simple code source 
statique de la page initialement chargee mais illustre revolution dynamique des differen- 
tes balises HTML. Pour s'en convaincre, il suffit d'ouvrir cette fenetre et de developper 
un element sur lequel une fonctionnalite de 1' application doit intervenir (la balise div 
d'identifiant i nfo par exemple). Si vous demarrez 1' application (en cliquant sur le bouton 
JOUER, par exemple) vous pouvez alors voir en temps reel dans la fenetre HTML 
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revolution de tous les contenus et attributs qui vont etre modifies au cours du traitement. 
Enfin, cette fenetre permet aussi de forcer le contenu d'une balise ou la valeur d'un attri- 
but afin d'observer immediatement son incidence dans la fenetre du navigateur (faites le 
test en changeant par exemple le nom du gagnant en le remplacant par le votre. . .). 

Les erreurs de syntaxe avec Firebug 

Personne n'est a l'abri d'une erreur de syntaxe. Si cela se produit, une icone rouge vous 
le signale en bas a droite du navigateur Firefox lors de vos tests. Lorsque vous cliquez sur 
cette icone, Firebug s'ouvre en affichant dans la fenetre de la console la nature de l'erreur 
rencontree (soit syntax error). En dessous de ce message se trouve l'instruction suspec- 
tee en vert et, si cela ne suffit pas pour trouver l'erreur, vous pouvez alors cliquer sur ce 
lien afin que Firebug vous affiche dans la fenetre script sa position dans le programme. 

La fenetre Script de Firebug 

La fenetre Script de Firebug permet de poser tres facilement des points d' arret dans vos 
programmes. Pour cela, il suffit de cliquer dans la marge de gauche de la fenetre Script au 
niveau de la ligne de script sur laquelle vous desirez marquer une pause. Un point rouge 
apparait alors a cet endroit pour vous signaler que le point d' arret est enregistre (un 
second clic sur le meme point le fait disparaitre). A noter que si vous desirez acceder a 
d'autres programmes externes JavaScript que celui qui s' affiche actuellement dans la 
fenetre Script, vous pouvez facilement passer de l'un a l'autre a l'aide du menu place 
dans la barre Firebug au-dessus du bouton Script. 

Une fois le point d'arret positionne, lancez l'application comme d'habitude (en cliquant 
sur le bouton JOUER, par exemple). Le programme demarre alors jusqu'a l'instruction 
reperee par le point d'arret (une petite fleche placee sur le point rouge indique que le 
programme est actuellement bloque a ce niveau). Si maintenant vous deplacez le pointeur 
de votre souris sur les differentes variables de la fenetre Script, une petite infobulle vous 
indique alors la valeur de 1' information survolee. Evidement, vous pouvez aussi profiter 
de cette pause pour visiter les autres fenetres de Firebug comme la fenetre HTML ou 
CSS par exemple. 

A ce stade, vous pouvez effectuer plusieurs actions a partir des boutons du panneau de 
controle situe a droite de la barre de menu de Firebug. Le premier bouton en forme de 
fleche bleue vous permet de relancer le programme jusqu'au prochain point d'arret (ou 
jusqu'a la fin du programme s'il n'y a qu'un seul point d'arret), alors que les autres 
boutons en forme de fleche vous permettent de continuer en marche pas a pas. A noter 
que si vous posez plusieurs points d'arret, vous avez la possibilite de les controler depuis 
la fenetre de droite en cliquant sur l'onglet Breakpoints (activer ou desactiver un point, 
voire le supprimer complete ment, aller directement a 1' endroit du point. . .). 

Observer les requetes XMLHttpRequest 

En ce qui concerne la mise au point des moteurs Ajax, l'observation des donnees echan- 
gees entre le navigateur et le serveur est certainement la fonctionnalite la plus interes- 
sante pour mettre au point les programmes JavaScript et PHP qui gerent ces echanges. 
Pour observer la requete envoyee ou la reponse du serveur, il suffit d'ouvrir la fenetre 
Console apres avoir declenche une requete Ajax. Cliquez ensuite sur le petit + devant la 
requete concernee, vous avez alors la possibilite de consulter les informations emises par 
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la requete en cliquant sur l'onglet Params et la reponse du serveur en cliquant sur l'onglet 
Response. Le contenu des en-tetes des deux echanges peut aussi etre consulte en cliquant 
cette fois sur l'onglet Header. 
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Ajax, la technologie phare des sites Web de nouwelle generation 

Ajax s'est aujourd'hui impose comme I'outil ideal pour creer des applications Web reactives, dotees d'interfaces 
utilisateur riches et ergonomiques. Couplee a PHP-MySQL, cette technologie permet en outre d'echanger des 
donnees avec le serveur, de maniere souple et rapide, et de les afficher dans le navigateur sans necessiter de 
rechargement. 

Realiser ses premiers moteurs Ajax-PHP 

Grace a 40 ateliers pratiques de difficulte croissante, cet ouvrage vous guidera pas a pas dans la construction d'un 
moteur Ajax-PHP performant, en resolvant progressivement les principaux problemes rencontres dans la creation 
d'une application Ajax. Vous decouvrirez en outre les multiples manieres d'utiliser I'objet XMLHttpRequest pour 
echanger avec le serveur des flux de donnees dans differents formats (texte, HTML, XML, JSON ou RSS). Vous 
apprendrez egalement comment une application Ajax, cote client, peut gerer des informations stockees dans une 
base de donnees MySQL via un script PHP. Enfin, pour mettre au point ces realisations, ce livre propose diffe- 
rentes techniques de debogage qui exploitent les fonctionnalites de I'extension Firebug de Firefox. 

Concevoir une application performante Ajax-PHP avec jQuery 

jQuery est une bibliotheque JavaScript qui permet en particulier de mettre en ceuvre des applications Ajax de 
maniere simple et rapide. Ce livre vous explique en detail comment exploiter cette bibliotheque sur votre site pour 
augmenter votre productivite et la fiabilite de vos developpements. II presente en outre une selection de plug-ins 
issus de jQuery capables de creer des applications Ajax et autres widgets avec une facilite deconcertante. Pour 
completer votre apprentissage, la derniere partie de I'ouvrage est consacree aux differentes technologies associees 
a Ajax (XHTML, CSS, XML, JavaScript, DOM, PHP et MySQL), en exposant pour chacune d'elles les connaissances 
necessaires a la comprehension du livre. 
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A qui s'adresse cet ouvrage ? 

- A ceux qui souhaitent integrer aisement et rapidement des applications Web 2.0 dans leurs projets Internet 

- A tous ceux qui desirent apprendre a concevoir des applications Ajax couplees a PHP/MySQL 

Sur le site www.editions-eyrolles.com 

- Telechargez le code source des exemples et des 40 ateliers de I'ouvrage 

- Dialoguez avec I'auteur 
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